使用核心jQuery,如何删除一个选择框的所有选项,然后添加一个选项并选择它?

我的选择框如下。

<Select id="mySelect" size="9"> </Select>

编辑:下面的代码有助于链接。但是,(在Internet Explorer中).val('whatever')没有选择添加的选项。(我确实在.append和.val中使用了相同的“value”。)

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

编辑:试图让它模仿这段代码,每当页面/表单重置时,我使用以下代码。这个选择框由一组单选按钮填充。.focus()更接近,但该选项没有像.selected= "true"那样显示为已选中。我现有的代码没有问题-我只是想学习jQuery。

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

编辑:所选的答案接近我所需要的。这招对我很管用:

$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;

但这两个答案都让我找到了最终的解决方案。


当前回答

我在Select2 -中看到这段代码 清除选择

$('#mySelect').val(null).trigger('change');

即使没有Select2,这段代码也可以很好地使用jQuery

其他回答

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

如果你的目标是从选择中删除除第一个选项(通常是“请选择一个项目”选项)之外的所有选项,你可以使用:

$('#mySelect').find('option:not(:first)').remove();
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

第一行代码将删除选择框的所有选项,因为没有提到选项查找标准。

第二行代码将添加带有指定值("testValue")和文本("TestText")的选项。

基于mauretto的回答,下面的内容更容易阅读和理解:

$('#mySelect').find('option').not(':first').remove();

要删除所有选项,除了一个具有特定值的选项,您可以使用以下命令:

$('#mySelect').find('option').not('[value=123]').remove();

如果要添加的选项已经存在,那就更好了。