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


How do you remove all the options of a select box and then add one option and select it with jQuery?

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

我的选择框如下。

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

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

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

编辑：试图让它模仿这段代码，每当页面/表单被重置时，我都使用下面的代码。此选择框由一组单选按钮填充。.focus()更接近，但似乎选择的选项不像选择.selected="true"那样。我现有的代码没有任何问题-我只是在尝试学习jquery。

1
2
3
4
var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)","Foo");
mySelect.options[0].selected="true";

编辑：所选答案与我需要的答案很接近。这对我很有用：

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

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

1
2
3
4
5
6
7
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
相关讨论

1
2
3
4
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
相关讨论

为什么不直接使用普通的javascript呢？

1
document.getElementById("selectID").options.length = 0;
相关讨论

我在IE7中有一个bug(在IE6中工作正常)，使用上面的jquery方法可以清除DOM中的select，但不会在屏幕上清除。使用IE开发人员工具栏，我可以确认选择已被清除并有新的项目，但是选择仍然显示旧项目-即使您不能选择它们。

修复方法是使用标准的dom方法/属性(就像最初的海报一样)来清除，而不是使用jquery-仍然使用jquery来添加选项。

1
$('#mySelect')[0].options.length = 0;
相关讨论

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

1
$('#mySelect').find('option:not(:first)').remove();
相关讨论

不确定"添加一个并选择它"是什么意思，因为默认情况下会选择它。但是，如果您要添加多个，这将更有意义。比如：

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

回答"编辑"：你能解释一下你所说的"这个选择框由一组单选按钮填充"是什么意思吗？元素。

1
2
3
4
5
6
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;
相关讨论

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

多亏了我收到的答案，我能够创造出像下面这样的东西，以满足我的需要。我的问题有点模棱两可。感谢您的跟进。我的最后一个问题是通过在我想要选择的选项中包含"已选择"来解决的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(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
1
2
3
4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<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>

  • 首先清除所有现有选项执行第一个选项(--select--)

  • 使用循环逐个附加新选项值

    1
    2
    3
    4
    $('#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));
    }

    • 把HTML改成新数据怎么样？

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

    另一个例子：

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

    另一种方式：

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

    在此链接下，有一些良好的实践https://api.jquery.com/select/

    我在网上发现了如下的东西。在我的情况下，有成千上万的选择，这比jquery中的.empty()或.find().remove()快得多。

    1
    2
    3
    4
    5
    6
    7
    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;
    }

    更多信息在这里。

    基于莫雷托的回答，这有点容易理解和理解：

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

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

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

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

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

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

    第二行代码将添加具有指定值("testValue")和文本("testText")的选项。

    相关讨论

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

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

    只需替换HTML即可

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

    使用jquery prop()清除所选选项

    1
    $('#mySelect option:selected').prop('selected', false);
    相关讨论

    我在select2中看到了这个代码https://select2.org/programmatic control/add select clear items清除选择

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

    希望它能起作用

    1
    2
    $('#myselect').find('option').remove()
    .append($('<option></option>').val('value1').html('option1'));
    相关讨论

    • save the option values to be appended in an object
    • clear existing options in the select tag
    • iterate the list object and append the contents to the intended select tag

    1
    2
    3
    4
    5
    6
    7
    var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

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

    $.each(listToAppend, function(val, text) {
        $('#selectID').append( new Option(text,val) );
      });
    1
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    [cc lang="javascript"]var select = $('#mySelect');
    select.find('option').remove().end()
    .append($('