JQuery創建新的選擇選項

我在常規JavaScript創建選擇選項中具有以下功能。有沒有辦法，我可以做到這一點，而不必使用表單對象？也許存儲選項JSON對象的數組，並在調用函數解析這個...JQuery創建新的選擇選項

function populate(form) 
{ 
form.options.length = 0; 
form.options[0] = new Option("Select a city/town in Sweden",""); 
form.options[1] = new Option("Melbourne","Melbourne"); 
}

下面是我如何調用上面的函數：

populate(document.form.county); //county is the id of the dropdownlist to populate.

來源

2010-05-04 van

可能的重複，http://stackoverflow.com/q/740195/425313 – 2013-04-24 03:28:22

類似於：

function populate(selector) { 
    $(selector) 
    .append('<option value="foo">foo</option>') 
    .append('<option value="bar">bar</option>') 
} 

populate('#myform .myselect');

甚至：

$.fn.populate = function() { 
    $(this) 
    .append('<option value="foo">foo</option>') 
    .append('<option value="bar">bar</option>') 
} 

$('#myform .myselect').populate();

來源

2010-05-04 17:49:06

什麼

var option = $('<option/>'); 
option.attr({ 'value': 'myValue' }).text('myText'); 
$('#county').append(option);

來源

2010-05-04 17:44:39 Tejs

+14

使用jQuery 1.4+，你可以這樣做：'$（'

建立選項列表稍微高效一些，然後將它們附加到DOM，所以每次都不會導致重新排序。請參閱https://developers.google.com/speed/articles/reflow和http://stackoverflow.com/questions/510213/when-does-reflow-happen-in-a-dom-environment – zedd45 2014-04-02 15:35:28

非常優雅的方式！好的。 – Keshav 2017-05-20 15:45:37

如何

$('#county').append(
    $('<option />') 
     .text('Select a city/town in Sweden') 
     .val(''), 
    $('<option />') 
     .text('Melbourne') 
     .val('Melbourne') 
);

來源

2010-05-04 17:52:44 CaffGeek

這是令人困惑的。當你說「表單對象」時，你的意思是「<select>元素」？如果沒有，你的代碼將不起作用，所以我會假設你的form變量實際上是對<select>元素的引用。你爲什麼要重寫這段代碼？自1996年以來，你所有的腳本瀏覽器都能夠運行，並且不會很快停止工作。用jQuery做這件事會立即讓你的代碼變得更慢，更容易出錯並且在瀏覽器中不兼容。

下面是一個使用你當前的代碼爲出發點和填充<select>元從一個對象的函數：

<select id="mySelect"></select> 

<script type="text/javascript> 

function populateSelect(select, optionsData) { 
    var options = select.options, o, selected; 
    options.length = 0; 
    for (var i = 0, len = optionsData.length; i < len; ++i) { 
     o = optionsData[i]; 
     selected = !!o.selected; 
     options[i] = new Option(o.text, o.value, selected, selected); 
    } 
} 

var optionsData = [ 
    { 
     text: "Select a city/town in Sweden", 
     value: "" 
    }, 
    { 
     text: "Melbourne", 
     value: "Melbourne", 
     selected: true 
    } 
]; 

populateSelect(document.getElementById("mySelect"), optionsData); 

</script>

來源

2010-05-04 21:30:38

如果您需要進行單個元素，你可以使用這樣的結構：

$('<option/>', { 
    'class': this.dataID, 
    'text': this.s_dataValue 
}).appendTo('.subCategory');

但是如果你需要打印很多元素，你可以使用這種結構：

function printOptions(arr){ 
    jQuery.each(arr, function(){ 
     $('<option/>', { 
      'value': this.dataID, 
      'text': this.s_dataValue 
     }).appendTo('.subCategory'); 
    }); 
}

來源

2015-01-03 11:24:37 mdBender

JQuery創建新的選擇選項

回答

相關問題