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


当前回答

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

Clean the select and leave the first option: $('#your_select_id').find('option').remove() .end().append('<option value="0">Selec...</option>') .val('whatever'); 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 ); My Json Objetc: [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]

这个解决方案非常适合使用Ajax,并以Json格式从数据库中回答问题。

其他回答

你可以使用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 

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

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

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

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

因为一些奇怪的原因

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

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

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

其中comboBx是你的组合框id。

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

Edit

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

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