浏览器中立的方式向javascript中的select元素添加选项

我刚学到一些有趣的东西。IE 6中javascript选择对象的add方法只接受一个参数。当您向其传递两个参数时，它会抛出一个错误，我相信这两个参数是相同的，即使在MSDN站点上也是如此

我的问题是。对于在javascript中以编程方式向select元素添加选项元素，您的最佳实践建议是什么

是否根据用户代理的值以不同方式调用add方法？ 是否将select对象包装在提供正确方法签名的类中？ 使用一个javascript库，它可以为您指定哪个库？

---

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

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

另外，在Firefox2、3、Opera 8、9.5和Safari 4中成功地进行了测试。IE4失败：

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

---

我记得，IE4使用了

中的addOption函数，它接受option元素的创建并附加它，但我可能没有正确地回忆起它-

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

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

---

我建议改用DOM方法

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

---

从未遇到过这样的问题。

如果您想在下拉列表的开头添加一个选项，则应使用以下变体：

    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]);
    }

---

您不应该使用Select.add方法，因为它在IE中已被破坏，并且有更好的方法动态添加选项，请参见

我也遇到了同样的问题，并且发现最好的方法是使用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;                        
}

这对我有用

---

$selectID.append$+display+.attr'value'，value

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

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");
}

由于select字段对象是通过访问其父对象（在本代码中为frmMain形式）来访问和操作的，因此任何浏览器运行代码都不会产生任何问题

包括IE在内的所有浏览器都支持此功能。

编辑：此功能在IE中不起作用，因此不建议使用

我通过更改innerHTML来实现：

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

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

---

或者，如果您使用数组填充下拉列表，则将其放入循环。

或者使用不带插件的jquery$+selectId.append$.attr'value'，value.textdisplay；但我需要IE 4解决方案。呃。。。你确定你需要IE4吗？因为这是一个非常古老的版本-它适用于Windows 95.IE4，但失败了，因为它不支持“document.getElementById” — 您必须使用document.all。“新选项”方法本身可以很好地追溯到Netscape 2.0！由于getElementById，在IE4中失败。请尝试document.forms[0]。您能将此答案扩展到IE吗？