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

$('#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;

如果您的目标是从选择中删除除第一个选项之外的所有选项（通常是“请选择一个项目”选项），您可以使用：

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

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

解决方法是使用标准 DOM 方法/属性（如海报原件那样）来清除而不是 jQuery - 仍然使用 jQuery 添加选项。

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

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

$('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>");

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

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

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

还有一种捷径，但没试过

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

多亏了我收到的答案，我才能够创造出符合我需要的类似以下内容。我的问题有点模棱两可。感谢您的跟进。我的最后一个问题是通过在我想要选择的选项中包含“选择”来解决的。

$(function() { $('#mySelect').children().remove().end().append('一个选项') ; // 清除选择框，然后添加一个被选中的选项 $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); / / 选择值为 1 的单选按钮 // 将点击事件绑定到每个单选按钮。 $("input[name='myRadio']").bind("click", function() { switch(this.value) { case " 1": $('#mySelect').find('option').remove().end().append('一个选项') ; break ; case "2": $('#mySelect').find('option').remove() ; var items = ["Item1", "Item2", "Item3"] ; // 本地设置为演示 var options = ' ' ; for (var i = 0; i < items.length; i++) { if (i==0) { options += '' + items[ i] + ''; } else { options += '' + items[i] + ''; } } $( '#mySelect').html(options); // 使用数组 break 填充选择框 } // 切换结束 } // 绑定函数n 结束）； // 绑定结束 }); // 事件监听结束 One 两个

我在网上找到了类似下面的东西。在我的情况下，有数千个选项，这比 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;
}

更多信息here。

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

另一种方式：

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

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

首先清除所有现有选项，除了第一个选项(--Select--) 使用循环一个接一个地追加新选项值 $('#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））; }

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

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

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

基于 mauretto 的回答，这更容易阅读和理解：

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

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

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

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

使用 jquery prop() 清除选定的选项

$('#mySelect option:selected').prop('selected', false);

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

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

你可以简单地通过替换 html

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

清洁工给我点赞

   let data= []

   let inp = $('#mySelect')
        inp.empty()

        data.forEach(el=> inp.append(  new Option(el.Nombre, el.Id) ))

保存要附加到对象中的选项值

清除选择标签中的现有选项

迭代列表对象并将内容附加到预期的选择标签

var listToAppend = {'':'选择车辆','mc':'Motor Cyle','tr':'三轮车'}; $('#selectID').empty(); $.each(listToAppend, function(val, text) { $('#selectID').append( new Option(text,val) ); });

我在 Select2 - Clearing Selections 中看到了这段代码

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

即使没有 Select2，此代码也适用于 jQuery

我使用香草 javascript

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

希望它会起作用

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

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('');

尝试

mySelect.innerHTML = `<option selected value="whatever">text</option>`

函数 setOne() { console.log({mySelect}); mySelect.innerHTML = `文本`; } 设置一个 old1 old2 old3

最短的答案：

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

尝试

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

或者

$('#mySelect').html('<option value="4">Value 4</option>
 <option value="5">Value 5</option>
<option value="6">Value 6</option>
<option value="7">Value 7</option>
<option value="8">Value 8</option>')
.find('option:first')
.prop("selected",true);