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

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

Спасибо


person flesh    schedule 25.11.2008    source источник
comment
Просто любопытно, почему этот вопрос был отклонен? Вероятно, потому что он не показывает ни одного фрагмента кода :)   -  person shasi kanth    schedule 15.09.2014


Ответы (12)


Без использования дополнительных плагинов,

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 только один раз!

person nickf    schedule 25.11.2008
comment
Параметры метода немного вводят в заблуждение, например, функция (val, text) должна быть функцией (index, option). В остальном работает хорошо. - person mbillard; 02.07.2010
comment
@Crossbrowser: Я не согласен - val и text фактически описывают переменные и их использование. - person nickf; 03.07.2010
comment
только для этого примера, однако в качестве метода общего назначения эти переменные вводят в заблуждение (он не дал мне понять, как использовать этот метод). Однако я скажу, что ответ был не об использовании метода $ .each. - person mbillard; 03.07.2010
comment
Вы касаетесь модели DOM при каждом запуске цикла. Лучше использовать фрагмент документа или хотя бы составную строку и прикоснуться к DOM один раз. - person Francisc; 23.04.2012
comment
Не говоря уже о том, что вы просите jQuery искать #mySelect при каждом запуске. Кешируйте его в локальную переменную, пожалуйста. - person Francisc; 23.04.2012
comment
Просто убедитесь, что текст на самом деле + текст. Я столкнулся с проблемой получения данных с пространством из базы данных. - person Sydwell; 17.08.2012
comment
Раньше я использовал mySelect.append(new Option(text, val));, который не работал в IE8. Пришлось перейти на mySelect.append($('<option></option>').val(val).html(text)); @ nickf - person Matthew Clark; 10.10.2012
comment
есть ли способ использовать это, а также принудительно установить выбранный атрибут в качестве параметра? Я думал, что .val () сделает это, но, похоже, в ie8 этого не происходит. - person BReal14; 17.07.2013
comment
@briansol: .attr('selected', true|false) - person nickf; 17.07.2013
comment
Отличный пример, поскольку он может быть заполнен с помощью объекта словаря, что является очень распространенным сценарием. Я согласен с mbillard в том, что использование val и text, которые очень часто используются в JQuery в качестве методов, можно переименовать во что-то более наглядное. - person Remy; 30.07.2013
comment
Второе из перечисленных решений для меня на самом деле заняло почти вдвое больше времени, чем первое, для больших выпадающих списков. - person Cymbals; 24.09.2015

Без подключаемых модулей это может быть проще, не используя столько 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) );
person Phrogz    schedule 31.03.2010
comment
Как установить свойства, например выбрать значение по умолчанию? - person Krishnan; 16.06.2011
comment
Этот мне нравится больше, чем метод "<option></option>"; это кажется грязным. - person Josh M.; 15.03.2012
comment
не работает в ie8 .. просто попробовал и увидел еще один комментарий по этому поводу ниже. - person BReal14; 17.07.2013

С помощью подключаемого модуля: jQuery Selection Box. Ты можешь это сделать:

var myOptions = {
        "Value 1" : "Text 1",
        "Value 2" : "Text 2",
        "Value 3" : "Text 3"
    }
    $("#myselect2").addOption(myOptions, false); 
person cgreeno    schedule 25.11.2008

Вы можете сначала очистить DropDown $ ('# DropDownQuality'). empty ();

Мой контроллер в MVC возвращал список выбора только с одним элементом.

$('#DropDownQuality').append(
        $('<option></option>').val(data[0].Value).html(data[0].Text));    
person Har    schedule 23.01.2012
comment
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

person Zakaria    schedule 30.04.2015
comment
Если вы используете двойные кавычки внутри параметров опции, они закроют функцию и сломают скрипт. Изменение .prepend("...") / $("...") на .prepend('...') / $('...') исправит фрагмент. - person Heraldmonkey; 02.02.2016

Обратите внимание, что решение @ Phrogz не работает в IE 8, в то время как @ nickf работает во всех основных браузерах. Другой подход:

$.each(myOptions, function(val, text) {
    $("#mySelect").append($("&lt;option/&gt;").attr("value", val).text(text));
});
person Marshal    schedule 22.08.2011

Вы можете использовать прямой

$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")

-> Здесь вы можете использовать прямую строку

person Jay    schedule 20.09.2010

А также используйте .prepend (), чтобы добавить параметр в начало списка параметров. http://api.jquery.com/prepend/

person Johan    schedule 29.03.2012

используя jquery, вы можете использовать

      this.$('select#myid').append('<option>newvalue</option>');

где «myid» - это идентификатор раскрывающегося списка, а новое значение - текст, который вы хотите вставить ..

person chopss    schedule 12.11.2014

Мне нужно было добавить в раскрывающиеся списки столько вариантов, сколько их было на моей странице. Итак, я использовал это так:

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. Что-то, что другие борются с тем, чем я был, может быть интересно узнать.

person vapcguy    schedule 20.11.2014
comment
Почему вы увеличиваете счетчик в каждом? Вы новичок в jquery? var counter = $ ('[id * = ddlPosition _]'). length менее подробный и более эффективный. Я думаю, вам нужно немного больше опыта, прежде чем вы начнете публиковать свой код. Это не производственный код, поскольку он плохо написан и слишком сложен для такой тривиальной задачи. Без обид, но есть причина, по которой у вас есть 58 ответов и нет голосов за. - person Athens Holloway; 06.12.2014
comment
Вы явно неправильно поняли то, что я создавал. Счетчик должен увеличивать значение, указанное в раскрывающемся списке, и у меня было несколько с тем же идентификатором, только с другим _ ## в конце, поэтому .length () было бы неточным. Это причина идентификатора * = в селекторе. - person vapcguy; 07.12.2014
comment
Что касается других моих ответов, обычно я также выступаю за более простые методы, когда это возможно, и если бы люди не были так эзотеричны в своем кодировании и писали вещи, которые были более упрощенными, мои ответы, вероятно, получили бы больше голосов. Но люди хотят выглядеть умными и поэтому не выбирают что-то настолько простое. Я не ошибаюсь в том, что просто хочу заниматься этой отраслью. Мне тоже не нравится устранять неполадки или надстраивать чужой код, который смехотворно сложнее, чем должен быть. - person vapcguy; 07.12.2014
comment
Я также мог бы больше доверять $ (this) .length () в этом цикле, если бы кто-нибудь мог объяснить, почему отправка $ (this) вместо объекта в myAppender не сработала. - person vapcguy; 07.12.2014

Предположим, ваш ответ - «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)
        );
    });
} }

Это сработает для вас ....

person Dulith De Costa    schedule 10.02.2020

попробуйте эту функцию:

function addtoselect(param,value){
    $('#mySelectBox').append('&lt;option value='+value+'&gt;'+param+'&lt;/option&gt;');
}
person Sebastian Mach    schedule 19.04.2011