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


1077

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

但是,这两个答案都使我找到了最终解决方案。

Answers:


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

3
@nickf:我有同样的问题,但是我需要添加一组复选框,而不是在下拉列表更改时添加一个,但是我的复选框来自xml。这不起作用
defau1t 2012年

10
请注意,您也可以像下面那样分解选项/属性/文本:.append($("<option></option>").attr("value", '123').text('ABC!')
Brock Hensley 2013年

1
@BrockHensley,我相信这个答案的真正优雅是与end()函数组合使用适当的链接。您的建议也将起作用。来自jQuery API文档:“大多数jQuery的DOM遍历方法都在jQuery对象实例上运行并产生一个新的,与一组不同的DOM元素匹配。当发生这种情况时,就好像将新的一组元素推入堆栈中一样每个后续的过滤方法都会将一个新的元素集压入堆栈。如果我们需要一个较旧的元素集,则可以使用end()将这些集弹出堆栈。”
安东尼·梅森

1
这是我能够重建菜单并更改iOS版PhoneGap上jQuery Mobile中所选选项的唯一方法。之后还需要刷新菜单。
2015年

3
@BrockHensley您甚至可以走到最远.append($("<option></option>", {'value':'123'}).text('ABC!')
vahanpwns '16

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

34
只是出于好奇,“空”比“发现”快吗?似乎是这样-因为“查找”将使用选择器,而“空”将仅用蛮力清空该元素。
Dan Esparza 2010年

52
@DanEsparza我给你做了一个jsperf;empty()结果当然更快;)jsperf.com/find-remove-vs-empty
vzwick 2012年

我对这个解决方案感到奇怪。它的填充部分还可以,但是当我尝试选择一个值(以我的情况为一天)时,我可以控制台记录该值,但是在选择字段中显示的值仍保留在第一个值中。 “T解决它:/
塔卡克斯索尔特

5
@TakácsZsolt也许您应该.val('whatever')像Matt的回答一样在链的末尾添加a 。
Kodos Johnson

.empty()可实现,而.remove()则不起作用
OverlordvI

127

为什么不只使用纯JavaScript?

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

7
我同意这是删除所有选项的最简单解决方案,但这只能回答一半的问题……
Elezar

2
这不会造成内存泄漏吗?选项元素现在不可访问,但仍被分配。
Synetech

1
Plain Old JS FTW(The Win)!!! :)
raddevus

78

如果您的目标是从选择项中删除除第一个选项之外的所有选项(通常是“请选择一项”选项),则可以使用:

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

10
这应该是答案。所有其他人有意删除了第一个,以期在以后重新创建它,我不喜欢。这也意味着他们也将第一个选项存储在第一个位置。

76

我在IE7中有一个错误(在IE6中可以正常工作),在其中使用上述jQuery方法会清除DOM中的选择内容,但不会显示在屏幕上。使用IE开发人员工具栏,我可以确认选择已被清除并包含新项目,但是从视觉上看,选择仍然显示了旧项目-即使您无法选择它们。

解决方法是使用标准的DOM方法/属性(如原始海报的作者)清除而不是jQuery-仍然使用jQuery添加选项。

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

6
我也必须在ie6中使用此方法,因为.empty()使得隐藏在容器中的选择框即使在父对象被隐藏的情况下也变得可见。
指挥官

2
事实证明,这种方法的性能要高一点(约1%):jsperf.com/find-remove-vs-empty
vzwick 2012年

3
+1这是最易读的代码(在我看来),在jsPerf链接(@vzwick链接)中,可接受的答案慢了34%(Opera 20)
Morvael 2014年

35

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

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

对“编辑”的回答:您能否阐明“此选择框由一组单选按钮填充”的含义?甲<select>元件不能(合法)包含<input type="radio">元素。


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

2
我们仍在使用IE6,此方法无效。但是,它确实在FF 3.5.6中起作用
Jay Corbett

3
可能必须在末尾添加.change()才能触发select的更改
Hayden Chambers'Apr


12

多亏了我收到的答案,我才能够创建类似以下内容的内容,从而满足我的需求。我的问题有点模棱两可。感谢您的跟进。我的最后一个问题通过在我想要选择的选项中包含“ 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>


8

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

8
  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));
    }

7

我在网上发现了类似下面的内容。在我的情况下,有成千上万个选项,这比jQuery 快得多.empty().find().remove()比jQuery 快得多。

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;
}

更多信息在这里



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

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

第二行代码将添加具有指定值(“ testValue”)和文本(“ TestText”)的Option。


虽然这可以回答这个问题,如果你提供了一个解释,那将是一个更为有用如何它回答它。
尼克,

6

基于mauretto的答案,这更易于阅读和理解:

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

要删除除具有特定值的选项以外的所有选项,可以使用以下命令:

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

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



4

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

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


4

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

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

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

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

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>



1

希望它能工作

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

如果更多,则它可以工作,那么我无法选择第二个选项
Anburaj_N,

0
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('');
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.