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

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

不太清楚你说的“添加一个并选中它”是什么意思，因为它无论如何都会被默认选中。但是，如果你要添加多个，它会更有意义。比如：

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

响应“编辑”：您能澄清一下“此选择框由一组单选按钮填充”的意思吗？<select>元素不能（合法地）包含<input type="radio">元素。

由于我收到的答案，我能够创建如下适合我需要的内容。我的问题有点模棱两可。感谢您的跟进。我最后的问题通过在我想要选中的选项中包含“选定”来解决。

$(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 demovar 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 arraybreak ;} // 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>

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

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

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

修复是使用标准的DOM方法/属性（如海报原始所示）来清除而不是jQuery-仍然使用jQuery来添加选项。

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

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

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

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

这将用新的my选择替换现有的my选择。

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

为什么不使用纯JavaScript？

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

使用jQueryprop（）清除选中的选项

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

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

我在网上找到了如下内容。在我的情况下，有成千上万的选项，这比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 copyselectParentNode.replaceChild(newSelectObj, selectObj);return newSelectObj;}

更多信息这里

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

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

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

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

如果要添加的选项已经存在，那就更好了。

1. 首先清除所有现有选项执行第一个（--Select--）

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

您可以简单地替换html

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

希望它能奏效

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

另一种方式：

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

在这个链接下，有良好的做法https://api.jquery.com/select/

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

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

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>

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

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

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

我在选择2中看到了这段代码-清算选择

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

即使没有选择2，这段代码也可以很好地使用jQuery

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

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

还有一条捷径但没有尝试

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

试试看

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

function setOne() {console.log({mySelect});mySelect.innerHTML = `<option selected value="whatever">text</option>`;}

<button onclick="setOne()" >set one</button><Select id="mySelect" size="9"><option value="1">old1</option><option value="2">old2</option><option value="3">old3</option></Select>

最简短的回答：

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

我用的是vanilla javascript

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

清洁剂给我喜欢它

   let data= []
let inp = $('#mySelect')inp.empty()
data.forEach(el=> inp.append(  new Option(el.Nombre, el.Id) ))

试试看

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