Как говорится в вопросе, как мне добавить новую опцию в DropDownList с помощью jQuery?
Спасибо
Как говорится в вопросе, как мне добавить новую опцию в DropDownList с помощью jQuery?
Спасибо
Без использования дополнительных плагинов,
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
- хороший вариант для повышения скорости, но мы не можем создать элемент option с использованием 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 только один раз!
val
и text
фактически описывают переменные и их использование.
- person nickf; 03.07.2010
#mySelect
при каждом запуске. Кешируйте его в локальную переменную, пожалуйста.
- person Francisc; 23.04.2012
mySelect.append(new Option(text, val));
, который не работал в IE8. Пришлось перейти на mySelect.append($('<option></option>').val(val).html(text));
@ nickf
- person Matthew Clark; 10.10.2012
.attr('selected', true|false)
- person nickf; 17.07.2013
Без подключаемых модулей это может быть проще, не используя столько 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) );
"<option></option>"
; это кажется грязным.
- person Josh M.; 15.03.2012
С помощью подключаемого модуля: jQuery Selection Box. Ты можешь это сделать:
var myOptions = {
"Value 1" : "Text 1",
"Value 2" : "Text 2",
"Value 3" : "Text 3"
}
$("#myselect2").addOption(myOptions, false);
Вы можете сначала очистить DropDown $ ('# DropDownQuality'). empty ();
Мой контроллер в MVC возвращал список выбора только с одним элементом.
$('#DropDownQuality').append(
$('<option></option>').val(data[0].Value).html(data[0].Text));
data
не определено.
- person vapcguy; 20.07.2021
Добавить в список в начале
$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>');
Добавить элемент в список в конце
$('<option value="6">Java Script</option>').appendTo("#ddlList");
Обычная операция раскрывающегося списка (Get, Set, Add, Remove ) с помощью jQuery
.prepend("...") / $("...")
на .prepend('...') / $('...')
исправит фрагмент.
- person Heraldmonkey; 02.02.2016
Обратите внимание, что решение @ Phrogz не работает в IE 8, в то время как @ nickf работает во всех основных браузерах. Другой подход:
$.each(myOptions, function(val, text) {
$("#mySelect").append($("<option/>").attr("value", val).text(text));
});
Вы можете использовать прямой
$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")
-> Здесь вы можете использовать прямую строку
А также используйте .prepend (), чтобы добавить параметр в начало списка параметров. http://api.jquery.com/prepend/
используя jquery, вы можете использовать
this.$('select#myid').append('<option>newvalue</option>');
где «myid» - это идентификатор раскрывающегося списка, а новое значение - текст, который вы хотите вставить ..
Мне нужно было добавить в раскрывающиеся списки столько вариантов, сколько их было на моей странице. Итак, я использовал это так:
function myAppender(obj, value, text){
obj.append($('<option></option>').val(value).html(text));
}
$(document).ready(function() {
var counter = 0;
var builder = 0;
// Get the number of dropdowns
$('[id*="ddlPosition_"]').each(function() {
counter++;
});
// Add the options for each dropdown
$('[id*="ddlPosition_"]').each(function() {
var myId = this.id.split('_')[1];
// Add each option in a loop for the specific dropdown we are on
for (var i=0; i<counter; i++) {
myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1);
}
$('[id*="ddlPosition_'+myId+'"]').val(builder);
builder++;
});
});
Это динамически настраивает раскрывающиеся списки со значениями, такими как от 1 до n, и автоматически выбирает значение для порядка, в котором был раскрывающийся список (т. Е. 2-й раскрывающийся список получил "2" в поле и т. Д.).
Было смешно, что я не мог использовать this
, this.Object
или $.obj
или что-то подобное во втором .each()
, хотя --- мне действительно пришлось получить конкретный идентификатор этого объекта, а затем захватить и передать весь этот объект моей функции перед этим. добавит. К счастью, идентификатор раскрывающегося списка был разделен знаком «_», и я смог его схватить. Я не думаю, что мне следовало это делать, но в противном случае он продолжал выдавать мне исключения jQuery. Что-то, что другие борются с тем, чем я был, может быть интересно узнать.
Предположим, ваш ответ - «successData». Он содержит список, который вам нужно добавить в качестве параметров в раскрывающемся меню.
success: function (successData) {
var sizeOfData = successData.length;
if (sizeOfData == 0) {
// NO DATA, throw an alert ...
alert ("No Data Found");
} else {
$.each(successData, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
} }
Это сработает для вас ....
попробуйте эту функцию:
function addtoselect(param,value){
$('#mySelectBox').append('<option value='+value+'>'+param+'</option>');
}