Добавление опций в тег <select> с помощью jQuery

Быстрый ответ

$('#yourSelectId').append(new Option('Текст для отображения', 'Значение'));

Замените 'yourSelectId' на ID вашего элемента <select>. Замените 'Текст для отображения' и 'Значение' на текст, который видит пользователь, и на значение опции соответственно.

Добавление одного элемента

Для добавления одного элемента в <select>, используйте следующий код:

// Добавляем абсолютно новый элемент, наполненный свежестью!
$('#mySelect').append($('<option>', { value: 'optValue', text: 'Один элемент' }));

Эта строка добавляет новый элемент с 'optValue' в качестве значения и 'Один элемент' в качестве отображаемого текста. Замените 'mySelect' на актуальный ID вашего селектора в HTML.

Добавление множества элементов из набора данных

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

var items = [{ value: 1, text: 'Первый Элемент' }, { value: 2, text: 'Второй Элемент' }];
// Множество элементов? Без проблем!
$.each(items, function (i, item) {
  $('#mySelect').append($('<option>', {
    value: item.value, 
    text: item.text 
  }));
});

С помощью метода $.each от jQuery, перебираем элементы и для каждого создаем и вставляем соответствующий <option>.

Установка предустановленного элемента

Хотите установить выбор для пользователя сразу? Вот как это сделать:

// Готовим красную дорожку для VIP-элемента!
$('#mySelect').append($('<option>', {
  value: 'preselectedValue', 
  text: 'VIP Элемент', 
  selected: true
}));

Атрибут selected со значением true сразу устанавливает этот элемент как выбранный, как только он появляется в <select>.

Использование чистого JavaScript — и без jQuery тоже отлично!

Если у вас под рукой только чистый JavaScript, это не страшно:

var select = document.getElementById('mySelect');
var option = new Option('Текст Элемента', 'Значение Элемента');
// Обходимся без jQuery!
select.options.add(option);

Метод options.add() из DOM API позволяет добавить новый элемент без использования jQuery.

Визуализация

Составляем меню (📃) и добавляем в него пункты (🍔):

$('#menu').append('<option value="burger">Бургер</option>');

Проверка меню до и после добавления:

До: [📃]
После: [📃, 🍔]

Каждый новый пункт в меню <select> теперь представлен в виде опции.

О повышении производительности

Постоянное добавление по одному элементу приводит к многократному обновлению DOM. Если требуется добавить массу элементов, предпочтение лучше отдать объединению их в одну строку для единовременной вставки, что повысит производительность.

Избегая проблем с экранированием

Чтобы избежать проблем с экранированием символов (как, например, при работе с кавычками), предпочтительно создавать элемент <option> через объектный подход:

// Встречаемся лицом к лицу с опасными кавычками! Переходим к объектному подходу.
var o = new Option('"Цитируемый" текст', 'safeValue');
$('#mySelect').append(o);

Такой способ обеспечивает корректное экранирование символов, включая кавычки, в тексте и значениях элементов.

Полезные материалы

1. .append() | Документация jQuery API — подробно о методе .append() в jQuery.
2. jQuery Add Elements — статья W3Schools о добавлении элементов с помощью jQuery.
3. JavaScript – populate drop down list with array – Stack Overflow — обсуждение на Stack Overflow о добавлении элементов из массива.
4. <select>: HTML-элемент Select – HTML: HyperText Markup Language | MDN — статья на MDN про HTML-элемент select.
5. Изучение jQuery | Codecademy — курс по jQuery на Codecademy.
6. jQuerify — блог-пост о добавлении элементов в <select> с помощью jQuery.
7. Полное руководство по элементу Table | CSS-Tricks — руководство по HTML-элементу table на CSS-Tricks.