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

Лично я предпочитаю этот синтаксис для добавления опций:

$('#mySelect').append($('<option>', {
    value: 1,
    text: 'Мой вариант'
}));

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

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

Проблема возникает из-за особенностей работы Internet Explorer 8 с объектами Option, созданными через конструкцию new Option().

Ваш оригинальный код не работает в IE8:

$("#selectList").append(new Option("option text", "value"));

Причина в том, что IE8 имеет проблемы с добавлением таких объектов в DOM напрямую.

Однако ваш второй вариант работает:

var o = new Option("option text", "value");
// Применяем jQuery к DOM-объекту 'o', чтобы воспользоваться методом html
$(o).html("option text");
$("#selectList").append(o);

В данном случае вы создаете объект Option, а затем "оборачиваете" его в jQuery, что позволяет использовать метод html корректно. Это решает проблему совместимости с IE8, и добавление элемента в селектор проходит успешно.

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

Это очень просто:

$('#select_id').append('<option value="five" selected="selected">Five</option>');

или

$('#select_id').append($('<option>', {
    value: 1,
    text: 'One'
}));

Оба подхода позволяют добавить новые элементы <option> в ваш <select> элемент с идентификатором select_id. Первый вариант использует строку HTML для добавления опции, а второй создает элемент с помощью jQuery, что может быть более удобным, если вам нужно динамически устанавливать различные атрибуты. Выберите тот, который лучше всего подходит для вашего случая!

Если имя или значение опции динамичные, вам не нужно беспокоиться об экранировании специальных символов в них. В таком случае вы можете предпочесть простые методы работы с DOM:

var s = document.getElementById('mySelect');
s.options[s.options.length] = new Option('Моя опция', '1');

Этот код добавляет новую опцию в элемент select без лишних хлопот с экранированием.

Вариант 1-

Вы можете попробовать следующее-

$('#selectID').append($('<option>',
 {
    value: value_variable,
    text : text_variable
}));

Пример использования-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append($('<option>',
     {
        value: i,
        text : "Опция " + i 
    }));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

Вариант 2-

Или попробуйте это-

$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );

Пример использования-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append( '<option value="'+i+'">'+'Опция '+i+'</option>' );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>