如何使用jQuery將選項添加到DropDownList？

Question

如問題所述，如何使用jQuery向DropDownList添加新選項？

感謝

Answer 1

不使用任何額外的插件，

var myOptions = { 
    val1 : 'text1', 
    val2 : 'text2' 
}; 
var mySelect = $('#mySelect'); 
$.each(myOptions, function(val, text) { 
    mySelect.append(
     $('<option></option>').val(val).html(text) 
    ); 
}); 

如果你有很多的選擇，或該代碼需要非常頻繁地運行，那麼你應該考慮使用一個DocumentFragment而不是多次不必要地修改DOM。只有少數選擇，我會說這不值得。

------------------------------- Added -------------- ------------------

DocumentFragment是速度增強的好選擇，但我們不能使用document.createElement('option')創建選項元素，因爲IE6和IE7不支持它。

我們可以做的是創建一個新的select元素，然後附加所有選項。一旦循環完成，將其追加到實際的DOM對象。

var myOptions = { 
    val1 : 'text1', 
    val2 : 'text2' 
}; 
var _select = $('<select>'); 
$.each(myOptions, function(val, text) { 
    _select.append(
      $('<option></option>').val(val).html(text) 
     ); 
}); 
$('#mySelect').append(_select.html()); 

這樣我們只會修改DOM一次！

Answer 2

隨着插件：jQuery Selection Box。你可以這樣做：

var myOptions = { 
     "Value 1" : "Text 1", 
     "Value 2" : "Text 2", 
     "Value 3" : "Text 3" 
    } 
    $("#myselect2").addOption(myOptions, false); 

Answer 3

由於沒有插件，這樣可以在不使用盡可能多的jQuery的容易，而不是去稍微老派：

var myOptions = { 
    val1 : 'text1', 
    val2 : 'text2' 
}; 
$.each(myOptions, function(val, text) { 
    $('#mySelect').append(new Option(text,val)); 
}); 

如果要指定選項是否a）是默認選擇的值，和b）現在應該選擇的，你可以通過在兩個參數：

var defaultSelected = false; 
    var nowSelected  = true; 
    $('#mySelect').append(new Option(text,val,defaultSelected,nowSelected)); 

Answer 4

U可以使用直接

$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")

- >這裏u可以使用直接串

Answer 5

試試這個功能：

function addtoselect(param,value){ 
    $('#mySelectBox').append('<option value='+value+'>'+param+'</option>'); 
} 

Answer 6

皮斯記@ Phrogz的解決方案在IE 8無法正常工作，而@ nickf在所有主要的瀏覽器上運行。另一種方法是：

$.each(myOptions, function(val, text) { 
    $("#mySelect").append($("<option/>").attr("value", val).text(text)); 
}); 

Answer 7

您可能要清除下拉第一 $（ '＃DropDownQuality'）空（）;

我有我的控制器在MVC返回一個選擇列表只有一個項目。

$('#DropDownQuality').append(
     $('<option></option>').val(data[0].Value).html(data[0].Text));  

Answer 8

而且，使用.prepend（）將選項添加到選項列表的開頭。使用jQuery http://api.jquery.com/prepend/

Answer 9

可以使用

 this.$('select#myid').append('<option>newvalue</option>'); 

其中 「身份識別碼」 是下拉列表中的ID和NEWVALUE是要插入文本..

Answer 10

我需要添加儘可能多的下拉選項，因爲我的頁面上有下拉菜單。與價值觀

function myAppender(obj, value, text){ 
    obj.append($('<option></option>').val(value).html(text)); 
} 

$(document).ready(function() { 
    var counter = 0; 
    var builder = 0; 
    // Get the number of dropdowns 
    $('[id*="ddlPosition_"]').each(function() { 
     counter++; 
    }); 

    // Add the options for each dropdown 
    $('[id*="ddlPosition_"]').each(function() { 
     var myId = this.id.split('_')[1]; 

     // Add each option in a loop for the specific dropdown we are on 
     for (var i=0; i<counter; i++) { 
      myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1); 
     } 
     $('[id*="ddlPosition_'+myId+'"]').val(builder); 
     builder++; 
    }); 
}); 

此動態設置的下拉菜單像1到n，並自動選擇訂單的值下拉是（即第二個下拉菜單有「2」在框中：那麼我以這種方式使用它等）。

這是荒謬的，我不能在我的第二.each()，雖然---實際上我得到那個對象的特定ID使用this或this.Object或$.obj或類似的東西，然後抓住和整個對象傳遞給我的功能，它會追加。幸運的是，我的下拉列表的ID由「_」分隔，我可以抓住它。我覺得我不應該這樣做，但它一直給我jQuery例外，否則。其他人正在爲我的所作所爲而苦苦掙扎。

Answer 11

添加項目到列表中開始時

$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>'); 

添加項目到底

$('<option value="6">Java Script</option>').appendTo("#ddlList"); 

Common Dropdown operation (Get, Set, Add, Remove) using jQuery