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元素和{ {3}}他们：

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

Answer 5

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

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

C:\wamp\apache\apache2.4.9\bin\php.ini

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

Answer 6

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

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

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

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

在上面的示例中，我只用一个新选项更改选项的旧列表。

Answer 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 Objetc：

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

该解决方案非常适合与Ajax一起使用，并可以通过数据库在Json中进行回答。

Answer 8

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

Answer 9

这有帮助吗？

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

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

9 个答案: