如何使用jQuery将选项添加到DropDownList？

如问题所述，如何使用jQuery将新选项添加​​到DropDownList？

谢谢

Answer 1

没有使用任何额外的插件，

var myOptions = { val1 : 'text1', val2 : 'text2' }; var mySelect = $('#mySelect'); $.each(myOptions, function(val, text) { mySelect.append( $('<option></option>').val(val).html(text) ); }); 

如果你有很多select，或者这个代码需要经常运行，那么你应该考虑使用一个DocumentFragment，而不是不必要地多次修改DOM。 只有less数的select，我会说这不值得。

– – – – – – – – – – – – – – – – 添加 – – – – – – – – – ————–

DocumentFragment是速度增强的好select，但是我们不能使用document.createElement('option')创build选项元素，因为IE6和IE7不支持它。

我们可以做的是，创build一个新的select元素，然后附加所有选项。 一旦循环完成，将其追加到实际的DOM对象。

 var myOptions = { val1 : 'text1', val2 : 'text2' }; var _select = $('<select>'); $.each(myOptions, function(val, text) { _select.append( $('<option></option>').val(val).html(text) ); }); $('#mySelect').append(_select.html()); 

这样我们只会修改DOM一次！

Answer 2

没有插件，这可以更容易，而不是使用更多的jQuery，而不是稍微老派：

 var myOptions = { val1 : 'text1', val2 : 'text2' }; $.each(myOptions, function(val, text) { $('#mySelect').append( new Option(text,val) ); }); 

如果要指定选项a）是否为默认选定值，并且b）现在应该select，则可以传入两个参数：

  var defaultSelected = false; var nowSelected = true; $('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) ); 

Answer 3

使用插件： jQueryselect框 。 你可以这样做：

 var myOptions = { "Value 1" : "Text 1", "Value 2" : "Text 2", "Value 3" : "Text 3" } $("#myselect2").addOption(myOptions, false); 

Answer 4

您可能需要先清除DropDown $（'＃DropDownQuality）。

我有我的控制器在MVC返回一个select列表只有一个项目。

 $('#DropDownQuality').append( $('<option></option>').val(data[0].Value).html(data[0].Text)); 

Answer 5

将项目添加到开始列表中

 $("#ddlList").prepend('<option selected="selected" value="0"> Select </option>'); 

最后添加项目列表

 $('<option value="6">Java Script</option>').appendTo("#ddlList"); 

常见的下拉操作（获取，设置，添加，删除）使用jQuery

Answer 6

Pease note @ Phrogz的解决scheme在IE 8中不起作用，而@ nickf在所有主stream浏览器中都能正常工作。 另一种方法是：

 $.each(myOptions, function(val, text) { $("#mySelect").append($("<option/>").attr("value", val).text(text)); }); 

Answer 7

你可以直接使用

$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")

– >这里你可以使用直接string

Answer 8

而且，使用.prepend（）将选项添加到选项列表的开头。 http://api.jquery.com/prepend/

Answer 9

使用jQuery你可以使用

  this.$('select#myid').append('<option>newvalue</option>'); 

其中“ myid ”是下拉列表的id ， newvalue是要插入的文本。

Answer 10

我需要添加尽可能多的下拉选项，因为我的页面上有下拉菜单。 所以我用这种方式：

 function myAppender(obj, value, text){ obj.append($('<option></option>').val(value).html(text)); } $(document).ready(function() { var counter = 0; var builder = 0; // Get the number of dropdowns $('[id*="ddlPosition_"]').each(function() { counter++; }); // Add the options for each dropdown $('[id*="ddlPosition_"]').each(function() { var myId = this.id.split('_')[1]; // Add each option in a loop for the specific dropdown we are on for (var i=0; i<counter; i++) { myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1); } $('[id*="ddlPosition_'+myId+'"]').val(builder); builder++; }); }); 

这个dynamic设置下拉列表，如1到n，并自动select下拉的订单（即第二个下拉得到“2”在框中等）的值。

在我的第二个.each() ，我不能使用this或者this this.Object或$.obj或者类似的东西，这真是太荒谬了 – 但是我实际上必须得到这个对象的特定ID，然后抓取并传递整个对象我的function之前，它会追加。 幸运的是，我的下拉列表的ID由“_”隔开，我可以抓住它。 我不觉得我应该不得不，但它一直给我jQuery例外，否则。 其他人正在为我所喜欢的东西而苦苦挣扎。

Answer 11

试试这个function：

 function addtoselect(param,value){ $('#mySelectBox').append('<option value='+value+'>'+param+'</option>'); }