如何用jQuery更改<select>的选项？

假设有一个选项列表可用，你如何用新的<option>更新<select> ？

Answer 1

您可以使用empty方法删除现有的选项，然后添加新的选项：

 var option = $('<option></option>').attr("value", "option value").text("Text"); $("#selectId").empty().append(option); 

如果您在对象中有新的选项，您可以：

 var newOptions = {"Option 1": "value1", "Option 2": "value2", "Option 3": "value3" }; var $el = $("#selectId"); $el.empty(); // remove old options $.each(newOptions, function(key,value) { $el.append($("<option></option>") .attr("value", value).text(key)); }); 

编辑：除了首先删除所有的选项，你可以使用:gtselect器来获取索引大于零的所有option元素，并remove它们：

 $('#selectId option:gt(0)').remove(); // remove all options, but not the first 

Answer 2

我把CMS的优秀答案投入到了一个快速的jQuery扩展中：

 (function($, window) { $.fn.replaceOptions = function(options) { var self, $option; this.empty(); self = this; $.each(options, function(index, option) { $option = $("<option></option>") .attr("value", option.value) .text(option.text); self.append($option); }); }; })(jQuery, window); 

它需要一个包含“text”和“value”键的对象数组。 所以用法如下：

 var options = [ {text: "one", value: 1}, {text: "two", value: 2} ]; $("#foo").replaceOptions(options); 

Answer 3

 $('#comboBx').append($("<option></option>").attr("value",key).text(value)); 

其中comboBx是您的comboboxID。

或者您可以将选项作为string附加到已存在的innerHTML，然后分配给select的innerHTML。

编辑

如果你需要保持第一个选项，并删除所有其他，那么你可以使用

 var firstOption = $("#cmb1 option:first-child"); $("#cmb1").empty().append(firstOption); 

Answer 4

这部分有些奇怪的原因

 $el.empty(); // remove old options 

从CMS解决scheme没有为我工作，所以而不是我只是用这个

 el.html(' '); 

这是有用的。 所以我的工作代码现在看起来像这样：

 var newOptions = { "Option 1":"option-1", "Option 2":"option-2" }; var $el = $('.selectClass'); $el.html(' '); $.each(newOptions, function(key, value) { $el.append($("<option></option>") .attr("value", value).text(key)); }); 

Answer 5

删除和添加DOM元素比修改现有的要慢。

如果你的选项集有相同的长度，你可以这样做：

 $('#my-select option') .each(function(index) { $(this).text('someNewText').val('someNewValue'); }); 

如果您的新选项集具有不同的长度，则可以使用上述某些技术删除/添加您真正需要的空选项。

Answer 6

例如，如果你的html代码包含这个代码：

 <select id="selectId"><option>Test1</option><option>Test2</option></select> 

为了更改你select的选项列表，你可以使用下面的代码。 当你的名字select命名selectId 。

 var option = $('<option></option>').attr("value", "option value").text("Text"); $("#selectId").html(option); 

在这个例子中，我只改变了一个新选项的旧选项列表。

Answer 7

如果我们不断更新<select> ，我们需要保存以前的值：

 var newOptions = { 'Option 1':'value-1', 'Option 2':'value-2' }; var $el = $('#select'); var prevValue = $el.val(); $el.empty(); $.each(newOptions, function(key, value) { $el.append($('<option></option>').attr('value', value).text(key)); if (value === prevValue){ $el.val(value); } }); $el.trigger('change');