使用核心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>') ;

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


当前回答

希望能奏效

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

其他回答

只需替换html即可

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');

感谢我收到的答案,我能够创建如下内容,这符合我的需求。我的问题有点模棱两可。谢谢你的跟进。我的最后一个问题通过在我想要选择的选项中加入“selected”来解决。

$(function() { $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1 // Bind click event to each radio button. $("input[name='myRadio']").bind("click", function() { switch(this.value) { case "1": $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ; break ; case "2": $('#mySelect').find('option').remove() ; var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo var options = '' ; for (var i = 0; i < items.length; i++) { if (i==0) { options += '<option selected value="' + items[i] + '">' + items[i] + '</option>'; } else { options += '<option value="' + items[i] + '">' + items[i] + '</option>'; } } $('#mySelect').html(options); // Populate select box with array break ; } // Switch end } // Bind function end ); // bind end }); // Event listener end <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>One<input name="myRadio" type="radio" value="1" /></label> <label>Two<input name="myRadio" type="radio" value="2" /></label> <select id="mySelect" size="9"></select>

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

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

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

不确定你所说的“添加一个并选择它”是什么意思,因为它无论如何都会被默认选中。但是,如果你要加一个以上的数,就更有意义了。比如:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

回复“EDIT”:你能解释一下你所说的“此选择框由一组单选按钮填充”是什么意思吗?<select>元素不能(合法地)包含<input type="radio">元素。

另一种方法:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

在这个链接下,有一些好的实践https://api.jquery.com/select/