如何更改<select>与jQuery ?

假设有一个选项列表可用，如何用新的__abc1更新<select> ?

392768 次浏览
小开 
$('#comboBx').append($("<option></option>").attr("value",key).text(value));

其中comboBx是你的组合框id。

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

< em >编辑< / em >

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

var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);
小开
最佳答案

你可以使用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选择器，获取所有索引大于0的option元素，并remove它们:

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

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

因为一些奇怪的原因

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

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

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

小开

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

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

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

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

小开

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

这有用吗?

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

传统的手工做事方式一直对我很有好处。

  1. 清除select并保留第一个选项:

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

  2. If your data comes from a Json or whatever (just Concat the data):

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

  3. My Json Objetc:

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

This solution is ideal for working with Ajax, and answers in Json from a database.


提交答案