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

【问题标题】：How to change options of <select> with jQuery?如何使用 jQuery 更改 <select> 的选项？
【发布时间】：2009-11-26 04:14:03
【问题描述】：

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

【问题讨论】：

标签： jquery html-select

【解决方案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

【讨论】：

empty()时如何保留第一个选项？
如果使用bootstrap-select，则在替换选项后添加以下内容以刷新选择选择器：$('#selectId').selectpicker('refresh'); $('#selectId').selectpicker('render');。否则，新选项将不会出现在您的选择列表中。
如何检查其中一个选项？
我个人觉得这个语法对于创建 jQuery 节点$el.append($('<option/>', { value: value, text: key }));987654333@ 更简洁一些
谢谢大家。如果您在编辑页面时必须为默认选定值设置选定值，我们可以在循环中使用类似这样的内容进行特定迭代，我们可以添加 selected $el.append($('', { value : value, selected: 'selected', text: key }));

【解决方案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);

【讨论】：

【解决方案3】：

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

comboBx 是您的组合框 ID。

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

编辑

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

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

【讨论】：

您要清除旧选项还是只在现有选项中添加新选项？

【解决方案4】：

这有帮助吗？

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

【讨论】：

这个问题是关于动态添加
答案可能与问题无关，但我在寻找这个答案时找到了我的方式，所以它有所帮助。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

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

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

【讨论】：

【解决方案7】：

手工做事的老派一直对我有好处。

清除选择并保留第一个选项：

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

如果您的数据来自 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 );

我的 Json 对象：

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

此解决方案非常适合使用 Ajax，并以 Json 格式从数据库中获取答案。

【讨论】：

【解决方案8】：

例如，如果您的 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);

在上面的示例中，我仅将旧的 option 列表更改为一个新选项。

【讨论】：

为什么 OP 应该尝试这个？请添加对您所做的事情以及您这样做的原因的解释，不仅是为了 OP，而且是为了未来的 SO 访问者。

【解决方案9】：

如果我们不断更新<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');

【讨论】：