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

Question

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

我的选择框如下。

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

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

$('#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>') ;

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

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

如果您的目标是从选择中删除除第一个选项之外的所有选项（通常是“请选择一个项目”选项），您可以使用：

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

Answer 5

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

解决方法是使用标准 DOM 方法/属性（如海报原件那样）来清除而不是 jQuery - 仍然使用 jQuery 添加选项。

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

Answer 6

不确定“添加一个并选择它”的确切含义，因为无论如何默认情况下都会选择它。 但是，如果您要添加多个，那就更有意义了。 怎么样：

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

对“编辑”的回应：您能否澄清“此选择框由一组单选按钮填充”的意思？ <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

只需一行即可从选择标签中删除所有选项，然后您可以添加任何选项，然后在第二行添加选项。

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));

还有一种捷径，但没试过

$('.ddlsl').empty().append(new Option('Select all', 'all'));

Answer 10

多亏了我收到的答案，我才能够创造出符合我需要的类似以下内容。 我的问题有点模棱两可。 感谢您的跟进。 我的最后一个问题是通过在我想要选择的选项中包含“选择”来解决的。

 $(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 11

我在网上找到了类似下面的东西。 在我的情况下，有数千个选项，这比 jQuery 中的.empty()或.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

将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 13

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 14

另一种方式：

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

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

Answer 15

$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

第一行代码将删除选择框的所有选项，因为没有提到选项查找条件。

第二行代码将添加具有指定值（“testValue”）和文本（“TestText”）的选项。

Answer 16

基于 mauretto 的回答，这更容易阅读和理解：

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

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

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

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

Answer 17

这将用新的 mySelect 替换现有的 mySelect。

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

Answer 18

使用 jquery prop()清除选中的选项

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

Answer 19

你可以简单地通过替换 html

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

Answer 20

清洁工给我点赞

   let data= []

   let inp = $('#mySelect')
        inp.empty()

        data.forEach(el=> inp.append(  new Option(el.Nombre, el.Id) ))

Answer 21

• 保存要附加到对象中的选项值
• 清除选择标签中的现有选项
• 迭代列表对象并将内容附加到预期的选择标签

 var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'}; $('#selectID').empty(); $.each(listToAppend, function(val, text) { $('#selectID').append( new Option(text,val) ); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 22

我在 Select2 - Clearing Selections中看到了这段代码

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

即使没有 Select2，此代码也适用于 jQuery

Answer 23

我使用香草 javascript

let select = document.getElementById("mySelect");
select.innerHTML = "";

Answer 24

希望它会起作用

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

Answer 25

var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');

Answer 26

尝试

mySelect.innerHTML = `<option selected value="whatever">text</option>`

 function setOne() { console.log({mySelect}); mySelect.innerHTML = `<option selected value="whatever">text</option>`; }

 <button onclick="setOne()" >set one</button> <Select id="mySelect" size="9"> <option value="1">old1</option> <option value="2">old2</option> <option value="3">old3</option> </Select>

Answer 27

最短的答案：

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

Answer 28

尝试

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

或者

$('#mySelect').html('<option value="4">Value 4</option>
 <option value="5">Value 5</option>
<option value="6">Value 6</option>
<option value="7">Value 7</option>
<option value="8">Value 8</option>')
.find('option:first')
.prop("selected",true);