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

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

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

答案

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

为什么不只使用纯 JavaScript?

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

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

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

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

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

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

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

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

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

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

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

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