javascript - new - jquery set select options




使用jQuery將選項添加到JS對象的最佳方式是什麼? (20)

jQuery的 

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

純粹的JavaScript 

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

使用jQuery從JavaScript對象向<select>添加選項的最佳方法是什麼？

我正在尋找一些我不需要插件的東西，但我也會對那些插件感興趣。

這就是我所做的： 

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

乾淨/簡單的解決方案：

這是matdumsa的清理和簡化版本 ： 

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

matdumsa的變化：（1）刪除append（）和（2）中選項的close標籤，將屬性/屬性作為append（）的第二個參數移動到地圖中。

  1. $.each比for循環慢
  2. 每次DOM選擇都不是循環$("#mySelect").append();的最佳實踐$("#mySelect").append();

所以最好的解決方案如下

如果JSON數據是 

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

使用它 

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

Chrome（jQuery 1.7.1）中的解決方案存在排序問題（Chrome按照名稱/編號對對象屬性進行排序？）為了保持順序（是的，它是對象的濫用），我改變了這一點： 

optionValues0 = {"4321": "option 1", "1234": "option 2"};

對此 

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

然後$ .each將如下所示： 

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
});

JSON格式： 

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

jQuery代碼將值填充到Ajax成功下拉菜單中： 

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

使用$ .map（）函數，你可以用更優雅的方式做到這一點： 

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

使用DOM Elements Creator插件 （我的最愛）： 

$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');

使用Option構造函數（不確定瀏覽器支持）： 

$(new Option('myText', 'val')).appendTo('#mySelect');

使用document.createElement （避免使用$("<option></option>")解析HTML的額外工作$("<option></option>") ）： 

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));

另一種做法是： 

var options = [];    
$.each(selectValues, function(key, value) {
    options.push($("<option/>", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);

我做了這樣的事情， 通過Ajax加載下拉項 。 上面的響應也是可以接受的，但為了獲得更好的性能，盡可能減少DOM修改總是很好的。

因此，不要在循環中添加每個項目，最好在循環中收集項目並在完成後追加它。 

$(data).each(function(){
    ... Collect items
})

追加它， 

$('#select_id').append(items);

甚至更好 

$('#select_id').html(items);

我將兩個最佳答案結合成一個很好的答案。 

var outputConcatenation = [];

$.each(selectValues, function(i, item) {   
     outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});

$("#myselect").html(outputConcatenation.join(''));

所有這些答案似乎都不必要的複雜。 所有你需要的是： 

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

這完全是跨瀏覽器兼容的。

有一種使用微軟模板方法的方法 ，目前這個方法已經被納入到jQuery核心中。 使用模板功能更強大，因此對於最簡單的情況，它可能不是最佳選擇。 欲了解更多詳情，請參閱Scott Gu的帖子概述這些功能。

首先包括可從github獲得的模板化js文件。 

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

接下來設置一個模板 

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

然後用你的數據調用.render（）方法 

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

我已經更詳細地討論了這種方法。

與其他答案一樣，使用jQuery時尚： 

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

被忽視......我在Android 2.2（Cyanogen 7.0.1）手機（T-Mobile G2）上使用帶有PhoneGap 1.0.0的jQuery Mobile 1.0b2，無法獲得.append（）方法。 我不得不使用.html（）如下所示： 

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

這是更快，更乾淨。 

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key,
        text: value
    }));
});

這看起來更好，提供可讀性，但比其他方法慢。 

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

如果你想要速度，最快（測試！）的方式是這樣的，使用數組，而不是字符串連接，並只使用一個附加調用。 

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

我做了一些測試，我相信這是最快的。 ：P 

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: value
    }));
});

if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

這在第一次構建巨型字符串之後僅操縱DOM一次。




new   from   create   array   javascript   jquery   arrays   html-select  


html-select