Question

我刚刚学到了一些有趣的东西。 IE 6中javascript选择对象的add方法只接受一个参数。当你传递两个我认为是standard的参数时，它会抛出一个错误，即使在MSDN网站上也是documented。

我的问题是这个。在javascript中以编程方式将选项元素添加到select元素的最佳实践建议是什么？

根据用户代理的值调用add方法？
将select对象包装在提供正确方法签名的类中？
使用javascript库为您执行此操作（指定哪个库）？

Answer 1

添加新的选项类型至少适用于IE6及以上版本

function addOption(selectID, display, value)
{
  var obj = document.getElementById(selectID);
  obj.options[obj.options.length] = new Option(display, value);
}

另外在Firefox 2,3，Opera 8,9.5和Safari 4中成功测试。 IE4失败了:(

Answer 2

您可以使用try-catch块执行此操作：

              try
    {
        //Standards compliant
        list.add(optionTag, null);
    }
    catch (err)
    {
        //IE
        list.add(optionTag);
    }

Answer 3

$("#selectID").addOption(value, text);

使用jQuery selectboxes plugin

中的addOption函数

Answer 4

我建议改用DOM方法。

document.createElement('option')
selectEl.appendChild()

从未遇到过这方面的问题。

Answer 5

你不应该使用Select.add方法，因为它在IE中被破坏了，并且有更好的方法可以动态添加选项（参见http://msdn.microsoft.com/en-us/library/ms535921(VS.85).aspx）

我遇到了同样的问题，并且发现最好的方法是使用Node.insertBefore方法。这样做的好处是可以在所有浏览器中工作，并且可以轻松地对元素进行排序，因为您不必将元素添加为IE中选择列表的最后一个元素。例如，将一个选项从一个选择列表添加到另一个选择列表，以便目标列表中的选项按字母顺序排序，可以这样做：

/*
adds an option to select element, alphabetically sorted according to the lower case value of the display element (option.text)
*/

function insertOptionToList(optionToInsert, targetSelectElement){

    for (var i=0;i<targetSelectElement.options.length;i++){
        var tempOptionText = targetSelectElement.options[i].text;
        if(tempOptionText.length>0 && optionToInsert.text.toLowerCase()<tempOptionText.toLowerCase()){
            targetSelectElement.insertBefore(optionToInsert,targetSelectElement[i]);
            return true;
        }
    }
    targetSelectElement.options[targetSelectElement.options.length] = optionToInsert;
    return true;                        
}

Answer 6

这对我有用

$(selectID).append($('<option>'+display+'</option>').attr('value', value));

Answer 7

我自己使用创建选项对象的所有排列和组合进行了一些研究，我希望这是我们可以通过浏览器中立方式添加选项的最佳方式：

function populateSelectField()
{

    document.frmMain.fldSelect.options.length = 0;
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 1");
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 2");
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 3");
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 4");
}

由于选择字段对象是通过访问它的父对象（在此代码中为“frmMain”（窗体））来访问和操作的，因此对于任何浏览器运行代码都不会产生任何问题。

所有浏览器都支持此功能，包括IE。

Answer 8

如果您要为下拉列表的开始添加选项，则应采用以下变体：

    try{
        list.add(optionTag, 0);
    } catch (err) {
        // Firefox is dumb for once: http://www.quirksmode.org/dom/w3c_html.html#selects
        list.add(optionTag, list.options[0]);
    }

Answer 9

（编辑：这在IE中不起作用，因此不推荐使用。）

我是通过更改innerHTML来实现的：

<select id="selectItem"></select>

var s=document.getElementById("selectItem");
s.innerHTML+="<option>apples</option>";
s.innerHTML+="<option>bananas</option>"; //(...etc)

如果您使用数组填充下拉列表，请将其置于循环中。

Answer 10

我记得，IE4接受创建一个选项元素并附加它，但也许我不记得它错了！ - ）

浏览器中立方式在javascript中为选择元素添加选项

10 个答案: