使用核心jQuery,如何删除一个选择框的所有选项,然后添加一个选项并选择它?
我的选择框是这样的。
<Select id="mySelect" size="9"> </Select>
编辑:下面的代码对连锁反应很有帮助。然而,(在Internet Explorer中).val('anything')
并没有选择被添加的选项。(我在.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>') ;
但这两个答案都让我找到了最终的解决方案。
不确定你说的"添加一个并选择它"到底是什么意思,因为无论如何它都会被默认选中。但是,如果你要增加一个以上的,那就更有意义了。不如这样吧。
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
对"EDIT"的回应 。你能澄清你说的"这个选择框是由一组单选按钮组成的"是什么意思吗?一个<选择>
元素不能(合法地)包含<输入类型="单选">
元素。
感谢我收到的答案,我能够创造出像下面这样的东西,这符合我的需要。我的问题有些含糊不清。谢谢你的跟进。我最后的问题是通过在我想要选择的选项中加入"选择"来解决的。
$(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>
<!--结束片段-->。
首先清除所有现有的选项,除了第一个选项(--选择--)。
使用循环逐一追加新的选项值。
$('#ddlCustomer').find('option:not(:first)').remove(); for (var i = 0; i <.oResult.length;; for (var i = 0; i < oResult.length.i++) { (var i = 0; i < oResult.length; i++) { $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/'
另一种方式。
$('#select').empty().append($('<option>').text('---------').attr('value',''));
在这个链接下,有好的做法https://api.jquery.com/select/
我在网上找到了类似下面的东西。
像我这种情况,有上千个选项,这比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;
}
更多信息这里.
1:
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');
第一行代码将删除选择框中的所有选项,因为没有提到选项查找标准,第二行代码将添加指定值的Option("testValue"和Text("TestText")。
第二行代码将添加具有指定值的选项("testValue")和文本("TestText")。
只需一行就可以从选择标签中删除所有选项,在你可以添加任何选项后,再添加第二行来添加选项。
$('.ddlsl').empty();
$('.ddlsl').append(new Option('Select all', 'all'));
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
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>
<!--结束片段-->