如何使用jQuery向DropDownList添加选项？

Question

如何使用jQuery向DropDownList添加选项？

正如问题所说，如何使用jQuery向DropDownList添加新选项？

谢谢

Answer 1

不使用任何额外的插件，var&nbsp;myOptions&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;val1&nbsp;:&nbsp;'text1', &nbsp;&nbsp;&nbsp;&nbsp;val2&nbsp;:&nbsp;'text2'};var&nbsp;mySelect&nbsp;=&nbsp;$('#mySelect');$.each(myOptions,&nbsp;function(val,&nbsp;text)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;mySelect.append( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('<option></option>').val(val).html(text) &nbsp;&nbsp;&nbsp;&nbsp;);});如果您有很多选项，或者需要非常频繁地运行此代码，那么您应该考虑使用DocumentFragment而不是不必要地多次修改DOM。对于少数选项，我会说它不值得。- - - - - - - - - - - - - - - - 添加 - - - - - - - - - --------------DocumentFragment是速度增强的好选择，但document.createElement('option')由于IE6和IE7不支持，我们无法创建选项元素。我们可以做的是，创建一个新的选择元素，然后附加所有选项。一旦循环完成，将其附加到实际的DOM对象。var&nbsp;myOptions&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;val1&nbsp;:&nbsp;'text1', &nbsp;&nbsp;&nbsp;&nbsp;val2&nbsp;:&nbsp;'text2'};var&nbsp;_select&nbsp;=&nbsp;$('<select>');$.each(myOptions,&nbsp;function(val,&nbsp;text)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;_select.append( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('<option></option>').val(val).html(text) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);});$('#mySelect').append(_select.html());这样我们只会修改DOM一次！

Answer 2

没有插件，如果不使用尽可能多的jQuery，这可以更容易，而不是更老的学校：var&nbsp;myOptions&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;val1&nbsp;:&nbsp;'text1', &nbsp;&nbsp;&nbsp;&nbsp;val2&nbsp;:&nbsp;'text2'};$.each(myOptions,&nbsp;function(val,&nbsp;text)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('#mySelect').append(&nbsp;new&nbsp;Option(text,val)&nbsp;);});如果要指定选项a）是否为默认选择值，并且b）现在应该选择，则可以传入另外两个参数：&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;defaultSelected&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;nowSelected&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;$('#mySelect').append(&nbsp;new&nbsp;Option(text,val,defaultSelected,nowSelected)&nbsp;);

Answer 3

使用插件：jQuery Selection Box。你可以这样做：var&nbsp;myOptions&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"Value&nbsp;1"&nbsp;:&nbsp;"Text&nbsp;1", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"Value&nbsp;2"&nbsp;:&nbsp;"Text&nbsp;2", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"Value&nbsp;3"&nbsp;:&nbsp;"Text&nbsp;3" &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;$("#myselect2").addOption(myOptions,&nbsp;false);