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


291

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

Спасибо


Просто любопытно, почему этот вопрос был отвергнут? Вероятно, потому что он не показывает фрагмент кода :)
Шаси Кант

Ответы:


451

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

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


8
Параметры метода немного вводят в заблуждение, например, функция (val, text) должна быть функцией (index, option). Хорошо работает в противном случае.
mbillard

14
@Crossbrowser: я не согласен - valи на textсамом деле описать переменные и их использование.
Nickf

1
только для этого примера, однако, как метод общего назначения, эти переменные вводят в заблуждение (это не дало мне понятия, как использовать этот метод). Однако я скажу, что ответ был не об использовании метода $ .each.
mbillard

1
Я ранее использовал mySelect.append(new Option(text, val));, который не работал в IE8. Я должен был переключиться на @ nickf'smySelect.append($('<option></option>').val(val).html(text));
Мэтью Кларк

5
@briansol:.attr('selected', true|false)
nickf

167

Без плагинов, это может быть проще без использования большого количества 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) );

1
Как вы устанавливаете свойства, такие как выбор значения по умолчанию?
Кришнан

20
Мне нравится этот лучше, чем "<option></option>"метод; это кажется грязным.
Джош М.

1
не работает в ie8 .. только что попробовал, а также увидел еще один комментарий по этому вопросу ниже.
briansol


11

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

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

$('#DropDownQuality').append(
        $('<option></option>').val(data[0].Value).html(data[0].Text));    

7

Добавить товар в список в начале

$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>');

Добавить элемент в список в конце

$('<option value="6">Java Script</option>').appendTo("#ddlList");

Обычная выпадающая операция (Get, Set, Add, Remove) с использованием jQuery


1
Если вы используете двойные кавычки внутри параметров вашего параметра, они закроют функцию и сломают скрипт. Переход .prepend("...") / $("...")на .prepend('...') / $('...')исправление фрагмента.
Heraldmonkey

4

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

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

3

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

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

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



0

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

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

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


0

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

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 _"]'). длина менее многословна и более эффективна. Я думаю, что вам нужно немного больше опыта, прежде чем начать размещать свой код. Это не производственный качественный код, поскольку он плохо написан и слишком сложен для такой тривиальной задачи. Без обид, но есть причина, по которой у вас 58 ответов и нет голосов.
Афины Холлоуэй

Вы, очевидно, неправильно поняли, что я создавал. Счетчик должен увеличивать значение, опубликованное в раскрывающемся списке, и у меня было несколько с одним и тем же идентификатором, просто с другим "_ ##" на конце, поэтому .length () была бы неточной. Это причина для «id * =» в селекторе.
vapcguy

Что касается других моих ответов, то в целом я также выступаю за более простые методы, когда это возможно, и если бы люди не были настолько эзотеричны с их кодированием и писали вещи, которые были бы более упрощенными, мои ответы, вероятно, имели бы больше голосов. Но люди хотят, чтобы они выглядели умными, и поэтому они не выберут что-то такое простое. Я не ошибаюсь, что просто хочу промышленности. Мне также не нравится устранять неполадки или строить на чужом коде, который смехотворно сложнее, чем это должно быть.
vapcguy

Я также мог бы больше доверять $ (this) .length () в этом цикле, если бы кто-то мог объяснить, почему отправка «$ (this)» вместо объекта myAppender не сработала.
vapcguy

0

Давайте думать, что ваш ответ "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)
        );
    });
} }

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


-1

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

function addtoselect(param,value){
    $('#mySelectBox').append('&lt;option value='+value+'&gt;'+param+'&lt;/option&gt;');
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.