如何删除select框的所有选项，然后添加一个选项，并select与jQuery？

使用核心jQuery，如何删除select框的所有选项，然后添加一个选项并select它？

我的select框如下。

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

编辑：下面的代码是有用的链接。 但是，（在Internet Explorer中） .val('whatever')没有select添加的选项。 （我在.append和.val中都使用了相同的“值”）。

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

编辑：试图让它模仿此代码，每当页面/窗体重置时使用下面的代码。 这个select框由一组单选button组成。 .focus()更接近，但是选项没有像选中的那样select.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>') ; 

但是这两个答案都使我得到了最终的解决scheme

Answer 1

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

Answer 2

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

Answer 3

为什么不只是使用普通的JavaScript？

 document.getElementById("selectID").options.length = 0; 

Answer 4

我有一个在IE7中的错误（在IE6中工作正常），使用上述jQuery方法将清除DOM中的select ，但不是在屏幕上。 使用IE开发工具栏，我可以确认select已经被清除，并有新的项目，但在视觉上， select仍然显示旧的项目 – 即使你不能select它们。

解决的办法是使用标准的DOM方法/特性（如海报原来的）来清除，而不是jQuery – 仍然使用jQuery来添加选项。

 $('#mySelect')[0].options.length = 0; 

Answer 5

如果您的目标是从select中除去第一个选项（通常是“请select一个项目”选项），您可以使用：

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

Answer 6

无法确定你的意思是“添加一个并select它”，因为它将被默认选中。 但是，如果你要增加一个以上，那就更有意义了。 感觉如何？

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

对“编辑”的回应 ：你能澄清你的意思吗？“这个select框由一组单选button组成”？ 一个<select>元素不能（合法地）包含<input type =“radio”>元素。

Answer 7

 $('#mySelect') .empty() .append('<option value="whatever">text</option>') .find('option:first') .attr("selected","selected") ; 

Answer 8

 $("#control").html("<option selected=\"selected\">The Option...</option>"); 

Answer 9

感谢我收到的答复，我能够创造出类似以下的东西，这符合我的需求。 我的问题有些含糊。 感谢您的跟踪。 我的最后一个问题是通过在我select的选项中join“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> 

Answer 10

如何将HTML更改为新的数据。

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

另一个例子：

 $('#mySelect').html(' <option value="1" selected>text1</option> <option value="2">text2</option> <option value="3" disabled>text3</option> '); 

Answer 11

我在网上发现了一些像下面这样的东西。 有成千上万的选项，比如在我的情况下，它比.empty()或.find().remove()从jQuery .find().remove() 。

 var ClearOptionsFast = function(id) { var selectObj = document.getElementById(id); var selectParentNode = selectObj.parentNode; var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy selectParentNode.replaceChild(newSelectObj, selectObj); return newSelectObj; } 

更多信息在这里 。

Answer 12

基于毛里求斯的答案，这是更容易阅读和理解：

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

要删除除特定值之外的所有选项，可以使用以下命令：

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

如果要添加的选项已经存在，这样会更好。

Answer 13

这将用新的mySelectreplace您现有的mySelect。

 $('#mySelect').replaceWith('<Select id="mySelect" size="9"> <option value="whatever" selected="selected" >text</option> </Select>'); 

Answer 14

你可以简单地通过replacehtml来完成

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

Answer 15

1. 首先清除所有存在的选项第一个（ – select – ）

2. 使用循环逐个追加新的选项值

    $('#ddlCustomer').find('option:not(:first)').remove(); for (var i = 0; i < oResult.length; i++) { $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID)); } 

Answer 16

使用jquery prop（）来清除所选的选项

 $('#mySelect option:selected').prop('selected', false); 

Answer 17

希望它能工作

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

Answer 18

其他方式：

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

在这个链接下，有很好的做法https://api.jquery.com/select/