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

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

您可以使用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));
});

编辑：要删除除第一个选项外的所有选项，可以使用:gt选择器来获取option索引大于零的所有元素，以及remove它们：

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

我将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);

它期望包含“文本”和“值”键的对象数组。因此用法如下：

var options = [
  {text: "one", value: 1},
  {text: "two", value: 2}
];

$("#foo").replaceOptions(options);

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

其中comboBx是您的组合框ID。

或者，您可以将选项作为字符串附加到已经存在的innerHTML中，然后分配给选择的innerHTML。

编辑

如果您需要保留第一个选项并删除所有其他选项，则可以使用

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

由于某些奇怪的原因，这部分

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

CMS解决方案中的内容不适用于我，因此我只使用了这个

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

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

如果选项集的长度相同，则可以执行以下操作：

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

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

例如，如果您的html代码包含以下代码：

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

为了更改选择中的选项列表，您可以使用下面的代码。当您的名字选择为selectId时。

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

在上面的示例中，我仅通过一个新选项更改了选项的旧列表。

这有帮助吗？

$("#SelectName option[value='theValueOfOption']")[0].selected = true;

手工做事的老派对我一直都是有益的。

1. 清洁选择并保留第一个选项：

       $('#your_select_id').find('option').remove()
       .end().append('<option value="0">Selec...</option>')
       .val('whatever');

2. 如果您的数据来自Json或其他任何数据（只需Concat数据）：

       var JSONObject = JSON.parse(data);
       newOptionsSelect = '';
       for (var key in JSONObject) {
           if (JSONObject.hasOwnProperty(key)) {
               var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>';
           }
       }
   
       $('#your_select_id').append( newOptionsSelect );

3. 我的Json Objetc：

       [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]

该解决方案是使用Ajax的理想选择，并且可以通过数据库在Json中进行回答。

如果我们<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');