javascript - jQuery如何删除一个选择框所有选项, 然后添加一个选项?

  显示原文与译文双语对照的内容

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

我的选择框如下。


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

编辑:以下代码对链接有帮助。 但是,( 在 IE 中) .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>') ;

但这两个问题都导致了我的最终解决方案。

时间:

我有一个在ie7( 在IE6中工作良好) Bug 使用上面的jquery方法将明确在dom中选择但不是在屏幕上。 使用 IE developer工具栏我可以确认选择被清除,新的项目,但是视觉选择仍然显示旧的物品——即使你不能选择他们。

修复是使用标准DOM方法/properites ( 因为海报原来的样子) 来清除而不是使用 jQuery - 仍然使用jQuery来添加选项。


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

如果你的目标是删除除第一个( 通常是'之外的所有选项,请选择你可以使用的项目'选项):


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

不确切地确定你的"添加并选择它"是什么意思,因为它将在默认情况下被选中。 但是,如果你要添加不止一个,那就更有意义了。 如何像:


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

应对"编辑": 你能解释一下你的意思"这里选择框由一组单选按钮填充"? <选择> 元素不能( 合法的) 包含 <输入 type="单选"> 元素。

感谢我收到的答案,我可以创建类似如下的内容,这符合我的需求。 我的问题有点模糊。 感谢你的跟踪。我的final 问题已经通过在我选择的选项中包含"选定"解决。

HTML


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

Javascript


$(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

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


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

...