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

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

我的选择框如下。

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

编辑:下面的代码有助于链接。但是，(在Internet Explorer中).val('whatever')没有选择添加的选项。(我确实在.append和.val中使用了相同的“value”。)

$('#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')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

2009-06-03 20:48:14

其他回答

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

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

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

还有一条很短的路，但我没有尝试

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

2019-07-17 06:29:50

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

2008-09-06 21:01:36

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

2011-03-30 02:30:23

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

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

更多信息请点击这里。

2015-04-08 09:42:42

我使用了纯javascript

let select = document.getElementById("mySelect");
select.innerHTML = "";

2021-08-02 14:56:59

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

推荐文章

最新文章

标签