假设一个选项列表是可用的,你如何更新<选择>与新的<选项>s?


当前回答

因为一些奇怪的原因

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

其他回答

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

因为一些奇怪的原因

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

如果你的新选项集有不同的长度,你可以使用上面描述的一些技巧删除/添加你真正需要的空选项。

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

你可以使用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选择器,获取所有索引大于零的选项元素并删除它们:

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