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

Question

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

但这两个答案都让我得到了最后的解决方案..

Answer 1

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

Answer 2

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

Answer 3

为什么不只是使用普通的JavaScript？

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

Answer 4

我在IE7中有一个错误(在IE6中工作正常),使用上面的jQuery方法将清除DOM中的选择而不是屏幕上的选择.使用IE Developer Toolbar我可以确认选择已被清除并拥有新项目,但在视觉上,选择仍显示旧项目 - 即使您无法选择它们.

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

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

Answer 5

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

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

Answer 6

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

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

对"编辑"的回应:你能澄清一下"这个选择框是否由一组单选按钮填充"的含义？甲<select>元件不能(合法)包含<input type="radio">元素.

Answer 7

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

Answer 8

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

Answer 9

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

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

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

一种更短的方法，但没有尝试

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

Answer 10

感谢我收到的答案,我能够创建符合我需求的以下内容.我的问题有些含糊不清.感谢您的跟进.通过在我想要的选项中包含"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>

Answer 11

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

Answer 12

1. 首先清除所有现有选项execpt第一个( - 选择 - )

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

Answer 13

其他方式:

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

在此链接下,有一些好的做法https://api.jquery.com/select/

Answer 14

我在网上发现了类似下面的东西.随着成千上万的像我的情况的选项,这是比快了很多.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;
}

更多信息在这里.

Answer 15

在mauretto的回答基础上,这更容易阅读和理解:

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

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

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

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

Answer 16

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

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

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