Каков наилучший способ добавить параметры для выбора в качестве объекта 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

То же, что и другие ответы, в стиле jQuery:

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

Answer 2

var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

Таким образом, вы «касаетесь DOM» только один раз.

Я не уверен, может ли последняя строка быть преобразована в $ ('# mySelect'). Html (output.join ('')), потому что я не знаю внутренних компонентов jQuery (возможно, он выполняет некоторый анализ в html () метод)

Answer 3

Это немного быстрее и чище.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

Answer 4

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

Answer 5

Использование Плагин DOM Elements Creator (мой любимый):

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

Использование конструктора Option (не уверен в поддержке браузера):

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

Использование document.createElement (избегая дополнительной работы по синтаксическому анализу HTML с $("<option></option>")):

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

Answer 6

Это выглядит лучше, обеспечивает удобочитаемость, но медленнее, чем другие методы.

$.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(''));

Answer 7

Все эти ответы кажутся излишне сложными. Все, что вам нужно, это:

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

Это полностью совместимо с браузерами.

Answer 8

@ joshperry

Кажется, что обычный .append также работает как положено,

$("mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

Answer 9

Будьте предупреждены ... Я использую jQuery Mobile 1.0b2 с PhoneGap 1.0.0 на телефоне Android 2.2 (Cyanogen 7.0.1) (T-Mobile G2) и не могу заставить работать метод .append () все. Мне пришлось использовать .html () следующим образом:

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

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

Answer 10

 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