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

Question

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

Спасибо

Answer 1

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

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

Answer 2

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

Answer 3

С плагином: Поле выбора jQuery . Вы можете сделать это:

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

Answer 4

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

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

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

Answer 5

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

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

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

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

Обычная выпадающая операция (получение, установка, добавление, удаление) с использованием jQuery

Answer 6

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

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

Answer 7

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

Answer 8

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

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

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

Answer 9

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

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» в поле и т. Д.).

Было смешно, что я не мог использовать this, или this.Object, или $.obj, или что-нибудь подобное в моем втором .each(), хотя --- мне действительно нужно было получить конкретный идентификатор этого объекта, а затем возьмите и передайте весь этот объект моей функции, прежде чем он добавится. К счастью, идентификатор моего выпадающего списка был разделен знаком «_», и я смог его получить. Я не чувствую, что должен был, но это продолжало давать мне исключения jQuery в противном случае. Что-то, что борется с тем, кем я был, может быть приятно знать.

Answer 10

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

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

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