javascript select option value取得




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

  1. 首先清除所有現有選項,然後執行第一個選項( - 選擇 - )

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

使用核心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" selected>text</option>')
.trigger('change');

其他方式:

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

在此鏈接下,有良好的做法https://api.jquery.com/select/


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

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

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

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

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


如果您的目標是從選擇中除去第一個選項(通常是“請選擇一個項目”選項),您可以使用以下選項:

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

希望它能起作用

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

我在網上找到了像下面這樣的東西。 在我的情況下有成千上萬個選項,這比.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


我有一個在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替換現有的mySelect。

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

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

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




html-select