Как я добавляю опции к DropDownList с помощью jQuery?
3 ответа
Не используя дополнительных плагинов,
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
, Если у Вас было много опций или этот код, должен был выполняться очень часто, тогда необходимо изучить использование DocumentFragment вместо того, чтобы изменить DOM много раз излишне. Только для горстки опций я сказал бы, что это не стоит того все же.
-------------------------------Добавленный--------------------------------
DocumentFragment является хорошим вариантом для повышения скорости, но мы не можем создать элемент опции с помощью document.createElement('option') начиная с IE6, и IE7 не поддерживают его.
то, Что мы можем сделать, создайте новый избранный элемент и затем добавьте все опции. Как только цикл закончен, добавьте его к фактическому Объекту DOM.
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
_select.append(
$('<option></option>').val(val).html(text)
);
});
$('#mySelect').append(_select.html());
Этот путь мы изменим DOM в течение только одного раза!
С плагином: Рамка выделения jQuery . Можно сделать это:
var myOptions = {
"Value 1" : "Text 1",
"Value 2" : "Text 2",
"Value 3" : "Text 3"
}
$("#myselect2").addOption(myOptions, false);
Без подключаемых модулей это может быть проще без использования такого большого количества jQuery, вместо этого немного более старомодно:
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
$.each(myOptions, function(val, text) {
$('#mySelect').append( new Option(text,val) );
});
Если вы хотите указать Независимо от того, является ли вариант a) выбранным по умолчанию значением и b) должен быть выбран сейчас, вы можете передать еще два параметра:
var defaultSelected = false;
var nowSelected = true;
$('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );