如何用jQuery更改<select>的選項？

Question

假設有一個選項列表可用，那麼如何用新的<option> s更新<select>？

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

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

其中comboBx是您的組合框ID。

或者您可以將選項附加爲已存在的innerHTML的字符串，然後分配給選擇的innerHTML。

編輯

如果你需要保持第一個選項，並刪除所有其他的，那麼你可以使用

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

Answer 3

我扔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 4

對於一些奇怪的原因從CMS解決方案這部分

$el.empty(); // remove old options 

，我沒有工作，所以不是說我只是用這個

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

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

在這個例子中

上述，我只有一個新的選項改變選項舊列表。

Answer 6

刪除和添加DOM元素比修改現有元素要慢。

如果你的選項設置有相同的長度，你可以做這樣的事情：

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

如果你的新選項集有不同的長度，你可以刪除/添加你真的需要空的選項，使用一些技巧如上所述。

Answer 7

如果我們更新<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 8

這是否幫助？

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