Як додати параметри до 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є хорошим варіантом для підвищення швидкості, але ми не можемо створити елемент опції, використовуючи, 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 лише один раз!

Без жодних плагінів це може бути простішим, не використовуючи стільки jQuery, замість того, щоб вийти трохи більше старої школи:

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
$.each(myOptions, function(val, text) {
    $('#mySelect').append( new Option(text,val) );
});

Якщо ви хочете вказати, чи є опція а) вибраним за замовчуванням значенням, і б) слід вибрати зараз, ви можете передати ще два параметри:

    var defaultSelected = false;
    var nowSelected     = true;
    $('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );

З плагіном: поле для вибору jQuery . Ви можете зробити це:

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));    

Додайте елемент до списку на початку

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

Додайте елемент до списку в кінці

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

Загальна операція випадання (Get, Set, Add, Remove) за допомогою jQuery

Зауваження Pease @ Рік 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 " - ідентифікатор випадаючого списку, а newvalue - текст, який потрібно вставити.

Мені потрібно було додати стільки варіантів до спадних місць, скільки було спаднень на моїй сторінці. Тому я використовував це таким чином:

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>');
}