Як найкраще додати опції у вибірку як JS-об'єкт за допомогою jQuery?

Який найкращий метод додавання опцій до <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's: (1) видалено тег close для опції всередині append() та (2) переміщено властивості/атрибути у карту як другий параметр append().

Darryl Hein
Edited question 27-го грудня 2017 в 8:05
Програмування
arrays javascript jquery html-select
4-го жовтня 2008 в 8:58
5 погляди
Рішення

Так само, як і інші відповіді, в стилі jQuery:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("")
                    .attr("value",key)
                    .text(value)); 
});
Justin Ethier
Edited answer 11-го квітня 2016 в 3:24
Коментарі (12)

Якщо вам не потрібно підтримувати старі версії IE, використання конструктора Option - це, безумовно, правильний шлях, читабельне та ефективне рішення:

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

За функціональністю воно еквівалентне, але чистіше:

$("").attr("value", "val").text("myText")).appendTo('#mySelect');
Nickolay
Edited answer 11-го вересня 2019 в 1:46
Коментарі (0)

Я зробив щось подібне, завантаження випадаючого списку через Ajax. Відповідь, наведена вище, також є прийнятною, але завжди добре мати якомога менше модифікацій DOM для кращої продуктивності.

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

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

Додати,

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

або ще краще

$('#select_id').html(items);
Peter Mortensen
Edited answer 2-го травня 2011 в 5:59
Коментарі (1)