EDIT: The following code was helpful with chaining. However, (in Inter" />

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

javascript jquery option html-select

996114 观看

23回复

14044 作者的声誉

Using core jQuery, how do you remove all the options of a select box, then add one option and select it?

My select box is the following.

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

EDIT: The following code was helpful with chaining. However, (in Internet Explorer) .val('whatever') did not select the option that was added. (I did use the same 'value' in both .append and .val.)

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

EDIT: Trying to get it to mimic this code, I use the following code whenever the page/form is reset. This select box is populated by a set of radio buttons. .focus() was closer, but the option did not appear selected like it does with .selected= "true". Nothing is wrong with my existing code - I am just trying to learn 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>') ;

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

作者: Jay Corbett 的来源 发布者: 2008 年 9 月 6 日

回应 (23)


1596

24621 作者的声誉

决定
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
作者: Matt 发布者: 06.09.2008 09:01

28

12189 作者的声誉

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

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

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

作者: Bobby Jack 发布者: 08.09.2008 06:51

10

14044 作者的声誉

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

作者: Jay Corbett 发布者: 09.09.2008 10:04

24

533 作者的声誉

$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;
作者: Hayden Chambers 发布者: 03.06.2009 08:48

661

6611 作者的声誉

$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
作者: Mahzilla 发布者: 16.12.2009 09:07

74

4545 作者的声誉

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

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

$('#mySelect')[0].options.length = 0;
作者: row1 发布者: 11.01.2010 09:22

20

325 作者的声誉

$("#control").html("<option selected=\"selected\">The Option...</option>");
作者: jvarandas 发布者: 30.03.2011 02:30

70

2562 作者的声誉

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

$('#mySelect').find('option:not(:first)').remove();
作者: mauretto 发布者: 27.03.2013 09:56

4

870 作者的声誉

这将使用新的mySelect替换现有的mySelect。

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');
作者: Barun 发布者: 18.10.2013 07:41

120

1892 作者的声誉

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

document.getElementById("selectID").options.length = 0;
作者: Shawn 发布者: 13.11.2013 07:45

4

51 作者的声誉

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

$('#mySelect option:selected').prop('selected', false);
作者: mehrdad 发布者: 01.02.2014 11:09

7

606 作者的声誉

如何将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>
');
作者: Shiv 发布者: 12.11.2014 11:45

6

13167 作者的声誉

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

更多信息在这里

作者: marioosh 发布者: 08.04.2015 09:42

6

2132 作者的声誉

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

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

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

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

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

作者: humbads 发布者: 18.06.2015 01:52

8

944 作者的声誉

  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));
    }
    
作者: Jaydeep Shil 发布者: 30.09.2015 06:58

4

730 作者的声誉

你可以简单地通过替换html来做

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
作者: Nadeem Manzoor 发布者: 04.10.2016 12:07

1

41 作者的声誉

希望它会奏效

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));
作者: Md. Russel Hussain 发布者: 23.10.2016 04:06

7

131 作者的声誉

其他方式:

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

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

作者: Jhon Intriago Thoth 发布者: 13.07.2017 03:55

0

1 作者的声誉

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('');
作者: LN Nitharsan 发布者: 19.08.2018 05:22

1

96 作者的声誉

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

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>

作者: Nifemi Sola-Ojo 发布者: 03.09.2018 11:17

5

173 作者的声誉

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

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

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

作者: Dev Chauhan 发布者: 12.10.2018 09:14

1

23 作者的声誉

我在select2中看到了这段代码 https://select2.org/programmatic-control/add-select-clear-items#clearing-selections

$('#mySelect).val(null).trigger('change');
作者: michael01angelo 发布者: 25.01.2019 06:34

0

117 作者的声誉

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

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

$('.ddlsl').append(new Option('Select all', 'all'));
作者: Kaushik shrimali 发布者: 17.07.2019 06:29
32x32