[Javascript] 你如何刪除選擇框的所有選項,然後添加一個選項,並選擇它與jQuery?


Answers

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

使用核心jQuery,如何刪除選擇框的所有選項,然後添加一個選項並選擇它?

我的選擇框如下。

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

編輯:下面的代碼是有用的鏈接。 但是,(在Internet Explorer中) .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>') ;

但是這兩個答案都讓我得到了最終的解決方案




如何將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>
');



這將用新的mySelect替換現有的mySelect。

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



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



希望它能起作用

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



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



基於毛里求斯的答案,這有點容易閱讀和理解:

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

要刪除除特定值之外的所有選項,可以使用以下命令:

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

如果要添加的選項已經存在,這會更好。




使用jquery prop()清除選定的選項

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



我有一個在IE7中的錯誤(在IE6中工作正常),使用上述jQuery方法將清除DOM中的選擇 ,但不在屏幕上。 使用IE開發工具欄我可以確認選擇已被清除,並有新的項目,但視覺上選擇仍然顯示舊項目 - 即使你不能選擇它們。

解決的辦法是使用標準的DOM方法/特性(如海報原來的)來清除而不是使用jQuery - 仍然使用jQuery來添加選項。

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



Links