浏览器中性向javascript中的select元素添加选项的方法

我刚刚学到了一些有趣的东西。 IE 6中JavaScript选择对象的add方法只有一个参数。当你传递两个参数时，它会抛出一个错误，我相信它是standard，即使是在MSDN站点上的documented。浏览器中性向javascript中的select元素添加选项的方法

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

根据用户代理的值不同地调用add方法？
将提供正确方法签名的类中的select对象包装起来？
使用一个JavaScript库为你做这个（指定哪个库）？

来源

2008-11-15 Glenn

您可以使用try-catch块这样做的：

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

来源

2008-11-15 12:47:17 Sanket

添加新的选项类型的作品至少IE6和至多

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

在Firefox 2，3，歌剧8，9.5另外测试，和Safari 4成功。 IE4失败:(

来源

2008-11-15 03:54:17

但我需要IE 4解决方案。 – keparo 2008-11-15 06:50:24

错误...你是否超出了某些你需要的IE4？因为这是一个非常古老的版本 - 它适用于Windows 95. – 2008-11-15 07:13:32

IE4因为不支持'document.getElementById（）'而失败 - 您将不得不使用document.all。 '新的Option（）'方法本身可以很好地追溯到Netscape 2.0！ – bobince 2008-11-15 11:27:12

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

使用addOption功能从jQuery selectboxes plugin

来源

2008-11-15 05:59:14

-1

我记得，IE4接受可选元素的创建和追加的，但也许我不记得coorrectly它 - ！）

来源

2008-11-15 09:56:44 roenving

我会建议使用DOM的方法来代替。

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

从来没有问题。

来源

2008-11-15 13:14:48 jishi

如果你想一个选项添加到下拉的开始，下面的变化应该这样做：

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

来源

2009-03-11 15:07:13 EoghanM

你不应该使用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;       
}

来源

2009-03-30 14:59:11 simon

这为我工作

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

来源

2010-01-14 04:18:24

我做了一些研究自己使用的所有排列，创造一种选择对象的组合，我希望这是最好的方式，使我们可以添加选项，选择在浏览器中立的方式：

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）支持。

来源

2012-05-03 05:22:27

（编辑：这并不在IE浏览器，所以它不建议使用。）

我做改变的innerHTML：

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

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

或者把它放在一个循环如果您使用数组来填充下拉列表。

来源

2012-08-18 06:54:06

浏览器中性向javascript中的select元素添加选项的方法

回答

相关问题