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

【问题标题】：How do you remove all the options of a select box and then add one option and select it with jQuery?如何删除选择框的所有选项，然后添加一个选项并使用 jQuery 选择它？
【发布时间】：2010-09-08 01:11:50
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html-select option dynamic-html

【解决方案1】：

我用的是原版 javascript

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

【讨论】：

【解决方案2】：

最短的答案：

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

【讨论】：

【解决方案3】：

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

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

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

另一种捷径，但没有尝试过

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

【讨论】：

【解决方案4】：

试试

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>

【讨论】：

【解决方案5】：

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

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

即使没有 Select2，这段代码也能很好地与 jQuery 一起工作

【讨论】：

【解决方案6】：

不确定您所说的“添加一个并选择它”是什么意思，因为无论如何它都会被默认选中。但是，如果您要添加多个，那就更有意义了。像这样的东西怎么样：

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

对“编辑”的回应：您能否阐明“此选择框由一组单选按钮填充”的意思？ <select> 元素不能（合法）包含 <input type="radio"> 元素。

【讨论】：

【解决方案7】：

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

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

第二行代码会添加带有指定值("testValue")和Text("TestText")的Option。

【讨论】：

虽然这可能会回答这个问题，但如果您提供关于它如何回答它的解释会更有用。

【解决方案8】：

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

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

$('#selectID').empty();

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

首先清除除第一个选项外的所有现有选项(--Select--)

使用循环一个接一个地追加新的选项值

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

【讨论】：

【解决方案11】：

另一种方式：

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

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

【讨论】：

【解决方案12】：

希望能成功

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

【讨论】：

如果更多选项我无法选择第二个选项，它会起作用

【解决方案13】：

你可以简单地通过替换html来做

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

【讨论】：

【解决方案14】：

感谢我收到的答案，我能够创建符合我需要的类似以下内容。我的问题有点模棱两可。感谢您的跟进。我的最后一个问题是通过在我想要选择的选项中包含“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>

【讨论】：

【解决方案15】：

将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>
');

【讨论】：

【解决方案16】：

这会将您现有的 mySelect 替换为新的 mySelect。

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

【讨论】：

【解决方案17】：

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

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

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

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

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

【讨论】：

【解决方案18】：

我在网上找到了类似下面的内容。在我的情况下有数千个选项，这比来自 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;
}

更多信息here。

【讨论】：

【解决方案19】：

为什么不直接使用纯 JavaScript？

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

【讨论】：

我同意这是删除所有选项的最简单解决方案，但这只能回答一半的问题......
这不会造成内存泄漏吗？选项元素现在无法访问，但仍被分配。

【解决方案20】：

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

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

【讨论】：

.prop() 仅在 jQuery 1.6+ 中生效。对于 jQuery 1.5-，使用 .attr()

【解决方案21】：

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

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

【讨论】：

这应该是答案。所有其他人都故意删除了第一个，以便以后重新创建它，我不喜欢；这也意味着他们也首先将第一个选项存储在某个地方。

【解决方案22】：

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

【讨论】：

只是出于好奇，'empty' 比 'find' 快吗？似乎是这样——因为“查找”会使用选择器，而“空”只会强行清空元素。
@DanEsparza 我给你做了一个 jsperf； empty() 当然更快 ;) jsperf.com/find-remove-vs-empty
我在这个解决方案中遇到了一个奇怪的故障。它的填充部分没问题，但是当我尝试选择一个值（在我的情况下为一天）时，我可以控制台记录该值，但选择字段中显示的值保留在第一个值中......我可以'不解决它：/
@TakácsZsolt 也许你应该像马特的回答一样在链的末尾添加一个.val('whatever')。
.empty() 适用于物化，而 .remove() 不起作用

【解决方案23】：

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

【讨论】：

【解决方案24】：

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

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

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

【讨论】：

我也不得不在 ie6 中使用这个方法，因为 .empty() 导致包含在隐藏容器中的选择框即使在父项被隐藏时也变得可见。
这种方法的性能也提高了一点点（大约 1%）：jsperf.com/find-remove-vs-empty
+1 这是最易读的（在我看来），在 jsPerf 链接（@vzwick 链接）中，接受的答案慢了 34%（Opera 20）

【解决方案25】：

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

【讨论】：

我们还在用IE6，这个方法没用。但是，它在 FF 3.5.6 中确实有效
可能必须在末尾添加 .change() 才能触发 select 的更改

【解决方案26】：

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

【讨论】：

@nickf：我有同样的问题，但我需要添加一组复选框，而不是更改下拉列表时添加一个复选框，但我的复选框来自 xml。这不起作用
请注意，您也可以拆分选项/属性/文本，例如：.append($("<option></option>").attr("value", '123').text('ABC!')
@BrockHensley，我相信这个答案的真正优雅之处在于与 end() 函数的适当链接。你的建议也会奏效。来自 jQuery API 文档：“大多数 jQuery 的 DOM 遍历方法对 jQuery 对象实例进行操作并生成一个新的对象实例，匹配一组不同的 DOM 元素。当这种情况发生时，就好像将新的一组元素推入堆栈它在对象内部维护。每个连续的过滤方法都会将一个新元素集推入堆栈。如果我们需要一个较旧的元素集，我们可以使用 end() 将集合从堆栈中弹出。"
这是我能够重建菜单并在 iOS 版 PhoneGap 上的 jQuery Mobile 中更改所选选项的唯一方法。之后还需要刷新菜单。
@BrockHensley 你甚至可以到.append($("<option></option>", {'value':'123'}).text('ABC!')