JQuery kullanarak bir DropDownList'e nasıl seçenekler ekleyebilirim?

Sorunun dediği gibi, jQuery kullanarak bir DropDownList'e nasıl yeni bir seçenek ekleyebilirim?

Teşekkürler

Fazladan eklenti kullanmadan,

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
});

Çok sayıda seçeneğiniz varsa veya bu kodun çok sık çalıştırılması gerekiyorsa , DOM'u gereksiz yere birçok kez değiştirmek yerine bir DocumentFragment kullanmayı düşünmelisiniz . Sadece bir avuç seçenek için buna değmez diyebilirim.

------------------------------- Katma ------------------ --------------

DocumentFragmenthız geliştirme için iyi bir seçenektir, ancak document.createElement('option')IE6 ve IE7 desteklemediğinden seçenek öğesi oluşturamıyoruz .

Yapabileceğimiz, yeni bir seçme öğesi oluşturmak ve ardından tüm seçenekleri eklemek. Döngü bittiğinde, onu gerçek DOM nesnesine ekleyin.

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

Bu şekilde DOM'u yalnızca bir kez değiştireceğiz!

Hiçbir eklenti olmadan, biraz daha eski okula gitmek yerine, bu kadar jQuery kullanmadan daha kolay olabilir:

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

A) seçeneğinin varsayılan olarak seçilen değer olup olmadığını ve b) şimdi seçili olup olmadığını belirtmek istiyorsanız, iki parametre daha iletebilirsiniz:

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

Eklenti ile: jQuery Seçim Kutusu . Bunu yapabilirsiniz:

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

DropDown'ınızı önce $ ('# DropDownQuality'). Empty ();

MVC denetleyicim sadece bir öğe ile bir seçim listesi iade vardı.

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

Başlangıçta listeye öğe ekle

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

Sondaki listeye öğe ekle

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

JQuery kullanarak Ortak Açılır işlem (Al, Ayarla, Ekle, Kaldır)

@ Phrogz'un çözümü IE 8'de çalışmazken, @ nickf'in tüm büyük tarayıcılarda çalışması. Başka bir yaklaşım:

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

U doğrudan kullanabilirsiniz

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

-> Burada doğrudan dize kullanabilirsiniz

Ayrıca, seçeneği seçenekler listesinin başına eklemek için .prepend () öğesini kullanın. http://api.jquery.com/prepend/

jquery kullanarak kullanabilirsiniz

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

"Nerede MyID " dir id açılır listesinin ve newvalue Eklemek istediğiniz metindir ..

Sayfamda açılanlar olduğu gibi açılır listelere çok sayıda seçenek eklemem gerekiyordu. Bu şekilde kullandım:

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

Bu, 1 ila n gibi değerlere sahip açılır menüleri dinamik olarak ayarlar ve açılır listenin bulunduğu siparişin değerini otomatik olarak seçer (örn. 2. açılır menüde kutuda "2" bulunur).

Kullandığım olamayacağını saçma thisya this.Objectya $.objbenim 2. böyle ya da bir şey .each()Aslında o nesnenin belirli kimliğini almak ve sonra kapmak ve onu ekleriz önce benim işlevine bu bütün nesneyi geçmek zorunda --- olsa. Neyse ki benim açılan kimliğimin kimliği bir "_" ile ayrılmıştı ve onu yakalayabilirim. Yapmam gerektiğini hissetmiyorum, ama aksi halde jQuery istisnaları vermeye devam etti. Başkalarının benim olduğum şeyle mücadele ettiği bir şey bilmek hoşunuza gidebilir.

Yanıtınızın "successData" olduğunu düşünelim. Bu, bir açılır menüde seçenek olarak eklemeniz gereken bir liste içerir.

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

Bu senin için işe yarar ....

bu işlevi deneyin:

function addtoselect(param,value){
    $('#mySelectBox').append('<option value='+value+'>'+param+'</option>');
}