Каков наилучший способ добавить параметры для выбора в качестве объекта JS с помощью jQuery?

Question

Каков наилучший способ добавления параметров в <select> из объекта JavaScript с использованием jQuery?

Я ищу что-то, для чего мне не нужен плагин, но я бы также заинтересовался плагинами, которые там есть.

Вот что я сделал:

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's :

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

Изменения от matdumsa: (1) убрал тег закрытия для опции внутри append () и (2) переместил свойства / атрибуты на карту как второй параметр append ().

Answer 1

Существует подход, использующий подход Microsoft Templating , который в настоящее время предлагается для включения в ядро ​​jQuery. В использовании шаблонов больше возможностей, поэтому для простейшего сценария это может оказаться не лучшим вариантом. Для получения более подробной информации см. Сообщение Скотта Гу с описанием возможностей.

Сначала включите шаблонный файл js, доступный из github .

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

Я опубликовал в блоге этот подход более подробно.

Answer 2

Я сделал что-то вроде этого, загружая выпадающий элемент через Ajax . Ответ выше также приемлем, но всегда полезно иметь как можно меньше модификаций DOM для лучшей производительности.

Таким образом, вместо того, чтобы добавлять каждый элемент внутри цикла, лучше собирать элементы в цикле и добавлять его после завершения.

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

Добавить,

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

или даже лучше

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

Answer 3

Простой способ:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

Answer 4

Вместо того, чтобы повторять один и тот же код везде, я бы посоветовал написать свою собственную функцию jQuery, например:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

Затем, чтобы добавить опцию, просто сделайте следующее:

$('select').addOption('0', 'None');

Answer 5

Компромисс между двумя верхними ответами в виде «одной строки»:

$.fn.append.apply($('mySelect'),
    $.map(selectValues, function(val, idx) {
        return $("<option/>")
            .val(val.key)
            .text(val.value);
    })
);

Создает массив элементов Option, используя map , а затем добавляет их все в Select сразу, используя apply, чтобы отправить каждый Option в качестве отдельного аргумента функции append.

Answer 6

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

Хорошо работает с jQuery 1.4.1.

Полный текст статьи об использовании динамических списков с ASP.NET MVC и jQuery: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

Answer 7

1. $.each медленнее, чем for петля
2. Каждый раз, выбор DOM не лучшая практика в цикле $("#mySelect").append();

Так что лучшим решением будет следующее

Если данные JSON resp равен

[
    {"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);

Answer 8

Несмотря на то, что все предыдущие ответы являются действительными, может быть целесообразно сначала добавить их в documentFragmnet, а затем добавить этот фрагмент документа как элемент после ...

См. мысли Джона Резига по этому вопросу ...

Что-то вроде:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

Answer 9

Существует проблема сортировки с этим решением в 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));
}); 

Answer 10

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 только один раз после создания гигантской нити.