Как лучше всего добавить варианты в select из JavaScript объекта при помощи jQuery?

Оффтоп javascript
1

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

Ищу решение, которое не требует дополнительных плагинов, но было бы интересно узнать о существующих плагинах.

Вот что я попробовал:

options = { "1": "тест 1", "2": "тест 2" };

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

Более чистое и простое решение:

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

Основные изменения: убрал закрывающий тег option внутри append() и перенес свойства в объект как второй параметр append().

2

Можно еще через map() - мне больше нравится. $('#mySelect').html(Object.keys(options).map(key => ${options[key]}).join('')); Короче и читается нормально. Только template literals работают не везде - для старых браузеров лучше обычный concat.

3

я делаю один большой append вместо кучи маленьких - работает намного быстрее. собираю всю строку с опциями, потом одним махом вставляю: let html = ''; $.each(options, function(key, value) { html += '<option value="' + key + '">' + value + '</option>'; }); $('#mySelect').html(html); разница особенно видна когда опций много

4

А если нужно очистить select перед добавлением новых опций, добавьте $('#mySelect').empty(); в начале. Кстати, как вы обрабатываете объекты с кучей элементов? Браузер не тормозит при добавлении сотен опций через append?