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

Posted 2023-02-21

技术标签:

【中文标题】如何删除选择框的所有选项，然后添加一个选项并使用 jQuery 选择它？【英文标题】：How do you remove all the options of a select box and then add one option and select it with 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>') ;

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

【问题讨论】：

【参考方案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!')

以上是关于如何删除选择框的所有选项，然后添加一个选项并使用 jQuery 选择它？的主要内容，如果未能解决你的问题，请参考以下文章

如何使列表框的一个选项将数据添加到新字段

怎么用jquery实现在一个下拉框中添加一个“其他”的选项来代表除去已选项的其余所有未选项