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

Question

假设有可用的选项列表，如何<select>用new来更新<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);

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

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中，然后分配给选择的innerHTML。

编辑

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

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

$("#cmb1").empty().append(firstOption);