Как говорится в вопросе, как мне добавить новую опцию в DropDownList с помощью jQuery?
Спасибо

С помощью плагина: Окно выбора jQuery. Ты можешь сделать это:
var myOptions = {
"Value 1" : "Text 1",
"Value 2" : "Text 2",
"Value 3" : "Text 3"
}
$("#myselect2").addOption(myOptions, false);
Без использования дополнительных плагинов,
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) должна быть функцией (index, option). В остальном работает хорошо.
@Crossbrowser: Я не согласен - val и text фактически описывают переменные и их использование.
только для этого примера, однако в качестве метода общего назначения эти переменные вводят в заблуждение (он не дал мне понять, как использовать этот метод). Однако я скажу, что ответ был не об использовании метода $ .each.
Вы касаетесь модели DOM при каждом запуске цикла. Лучше использовать фрагмент документа или хотя бы составную строку и прикоснуться к DOM один раз.
Не говоря уже о том, что вы просите jQuery искать #mySelect при каждом запуске. Кешируйте его в локальную переменную, пожалуйста.
Просто убедитесь, что текст действительно "" + текст. Я столкнулся с проблемой получения данных с пространством из базы данных.
Раньше я использовал mySelect.append(new Option(text, val));, который не работал в IE8. Пришлось перейти на mySelect.append($('<option></option>').val(val).html(text)); от @nickf
есть ли способ использовать это, а также принудительно установить выбранный атрибут в качестве опции? Я думал, что .val () сделает это, но, похоже, в ie8 этого не происходит.
@briansol: .attr('selected', true|false)
Отличный пример, поскольку он может быть заполнен с помощью объекта словаря, что является очень распространенным сценарием. Я согласен с mbillard в том, что использование val и text, которые очень часто используются в JQuery в качестве методов, можно переименовать во что-то более наглядное.
Второе перечисленное решение для меня фактически заняло почти вдвое больше времени, чем первое, для больших выпадающих списков.
Без плагинов это может быть проще, не используя столько 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>"; это кажется грязным.
не работает в ie8 .. просто попробовал и увидел еще один комментарий по этому поводу ниже.
Вы можете использовать прямой
$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")
-> Здесь вы можете использовать прямую строку
попробуйте эту функцию:
function addtoselect(param,value){
$('#mySelectBox').append('<option value='+value+'>'+param+'</option>');
}
Обратите внимание, что решение @ Phrogz не работает в IE 8, в то время как @ nickf работает во всех основных браузерах. Другой подход:
$.each(myOptions, function(val, text) {
$("#mySelect").append($("<option/>").attr("value", val).text(text));
});
Вы можете сначала очистить DropDown $ ('# DropDownQuality'). Пустой ();
Мой контроллер в MVC возвращал список выбора только с одним элементом.
$('#DropDownQuality').append(
$('<option></option>').val(data[0].Value).html(data[0].Text));
А также используйте .prepend (), чтобы добавить параметр в начало списка параметров. http://api.jquery.com/prepend/
используя jquery, вы можете использовать
this.$('select#myid').append('<option>newvalue</option>');
где «мой ID» - это я бы раскрывающегося списка, а новое значение - текст, который вы хотите вставить ..
Мне нужно было добавить в выпадающие списки столько вариантов, сколько их было на моей странице. Итак, я использовал это так:
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. Что-то, что другие борются с тем, чем я был, может быть интересно узнать.
Почему вы увеличиваете счетчик в каждом? Вы новичок в jquery? var counter = $ ('[id * = "ddlPosition _"]'). length менее подробный и более эффективный. Я думаю, вам нужно немного больше опыта, прежде чем вы начнете публиковать свой код. Это не производственный код, поскольку он плохо написан и слишком сложен для такой тривиальной задачи. Без обид, но есть причина, по которой у вас есть 58 ответов и нет голосов за.
Вы явно неправильно поняли то, что я создавал. Счетчик должен увеличивать значение, указанное в раскрывающемся списке, и у меня было несколько с тем же идентификатором, только с другим «_ ##» в конце, поэтому .length () было бы неточным. Вот почему в селекторе стоит «id * =».
Что касается других моих ответов, обычно я также выступаю за более простые методы, когда это возможно, и если бы люди не были так эзотеричны в своем кодировании и писали более упрощенные вещи, мои ответы, вероятно, получили бы больше голосов. Но люди хотят выглядеть умными и не выбирают что-то настолько простое. Я не ошибаюсь в том, что просто хочу заниматься индустрией. Мне также не нравится устранять неполадки или создавать код других людей, который смехотворно сложнее, чем должен быть.
Я также мог бы больше доверять $ (this) .length () в этом цикле, если бы кто-нибудь мог объяснить, почему отправка «$ (this)» вместо объекта в myAppender не сработала.
Добавить элемент в список в начале
$("#ddlList").prepend('<option selected = "selected" value = "0"> Select </option>');
Добавить элемент в список в конце
$('<option value = "6">Java Script</option>').appendTo("#ddlList");
Если вы используете двойные кавычки внутри своих параметров, они закроют функцию и сломают скрипт. Замена .prepend("...") / $("...") на .prepend('...') / $('...') исправит этот фрагмент.
Предположим, ваш ответ - «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)
);
});
} }
Это сработает для вас ....
Просто любопытно, почему этот вопрос был отклонен? Вероятно, потому что он не показывает ни одного фрагмента кода :)