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

Question

Какой самый простой способ добавить option в выпадающий список с помощью jQuery?

Будет ли это работать?

$("#mySelect").append('<option value=1>My option</option>');

Answer 1

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

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

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

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

Answer 2

Это НЕ работало в IE8 (пока не работало в FF):

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

Это ДЕЙСТВИТЕЛЬНО работало:

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);

Answer 3

Вы можете добавить опцию, используя следующий синтаксис. Также вы можете перейти к опции way handle в jQuery для более подробной информации.

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

2. $('#select').append('<option value="1">One</option>');

3. var option = new Option(text, value); $('#select').append($(option));

Answer 4

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

var s= document.getElementById('mySelect');
s.options[s.options.length]= new Option('My option', '1');

Answer 5

Вариант 1-

Вы можете попробовать это-

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

Как это-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append($('<option>',
     {
        value: i,
        text : "Option "+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+'">'+'Option '+i+'</option>' );
}

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

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

Answer 6

по какой-либо причине выполнение $("#myselect").append(new Option("text", "text")); не работает для меня в IE7 +

Мне пришлось использовать $("#myselect").html("<option value='text'>text</option>");

Answer 7

Это хорошо работает.

Если добавляется более одного элемента option, я рекомендую выполнить добавление один раз, а не добавление для каждого элемента.

Answer 8

Чтобы повысить производительность, вы должны попытаться изменить DOM только один раз, особенно если вы добавляете много опций.

var html = '';

for (var i = 0, len = data.length; i < len; ++i) {
    html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>');
}           

$('#select').append(html);

Answer 9

$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');

Answer 10

Мне нравится использовать не jquery подход:

mySelect.add(new Option('My option', 1));