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

Question

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

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

编辑:为了删除除第一个之外的所有选项,您可以使用:gt选择器来获取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是你的组合框ID.

或者您可以将选项作为字符串附加到已存在的innerHTML,然后分配给select innerHTML.

编辑

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

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

Answer 4

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

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