Bagaimana cara menambahkan opsi ke DropDownList menggunakan jQuery?

Seperti pertanyaannya, bagaimana cara menambahkan opsi baru ke DropDownList menggunakan jQuery?

Terima kasih

Tanpa menggunakan plugin tambahan,

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

Jika Anda memiliki banyak opsi, atau kode ini perlu dijalankan sangat sering, maka Anda harus melihat menggunakan DocumentFragment alih-alih memodifikasi DOM berkali-kali tanpa perlu. Untuk hanya beberapa pilihan, saya akan mengatakan itu tidak layak sekalipun.

------------------------------- Ditambahkan ------------------ --------------

DocumentFragmentadalah opsi yang baik untuk peningkatan kecepatan, tetapi kami tidak dapat membuat elemen opsi menggunakan document.createElement('option')karena IE6 dan IE7 tidak mendukungnya.

Apa yang bisa kita lakukan adalah, membuat elemen pilih baru dan kemudian menambahkan semua opsi. Setelah loop selesai, tambahkan ke objek DOM yang sebenarnya.

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

Dengan cara ini kami akan memodifikasi DOM hanya untuk satu kali!

Tanpa plug-in, ini bisa lebih mudah tanpa menggunakan banyak jQuery, alih-alih menjadi sekolah yang sedikit lebih lama:

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

Jika Anda ingin menentukan apakah opsi a) adalah nilai yang dipilih default, dan b) harus dipilih sekarang, Anda dapat memasukkan dua parameter lagi:

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

Dengan plugin: jQuery Selection Box . Kamu bisa melakukan ini:

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

Anda mungkin ingin menghapus DropDown Anda terlebih dahulu $ ('# DropDownQuality'). Empty ();

Saya memiliki controller saya di MVC mengembalikan daftar pilih dengan hanya satu item.

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

Tambahkan item ke daftar di awal

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

Tambahkan item ke daftar pada akhirnya

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

Operasi Dropdown umum (Dapatkan, Atur, Tambah, Hapus) menggunakan jQuery

Catatan Pease @ solusi Phrogz tidak bekerja di IE 8 sedangkan @ nickf bekerja di semua browser utama. Pendekatan lain adalah:

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

Anda dapat menggunakan langsung

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

-> Di sini kamu dapat menggunakan string langsung

Dan juga, gunakan .prepend () untuk menambahkan opsi ke awal daftar opsi. http://api.jquery.com/prepend/

menggunakan jquery yang bisa Anda gunakan

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

di mana " myid " adalah id dari daftar dropdown dan nilai baru adalah teks yang ingin Anda masukkan ..

Saya perlu menambahkan banyak opsi ke dropdown karena ada dropdown di halaman saya. Jadi saya menggunakannya dengan cara ini:

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

Ini secara dinamis mengatur dropdown dengan nilai-nilai seperti 1 ke n, dan secara otomatis memilih nilai untuk urutan dropdown itu (yaitu dropdown 2 mendapat "2" di dalam kotak, dll.).

Itu konyol bahwa saya tidak dapat menggunakan thisatau this.Objectatau $.objatau sesuatu seperti itu di 2 saya .each(), meskipun --- saya benar-benar harus mendapatkan ID spesifik dari objek itu dan kemudian mengambil dan meneruskan seluruh objek itu ke fungsi saya sebelum ditambahkan. Untungnya ID dropdown saya dipisahkan oleh "_" dan saya bisa mengambilnya. Saya tidak merasa saya harus melakukannya, tapi itu terus memberi saya jQuery pengecualian. Sesuatu yang lain bergumul dengan apa yang mungkin saya nikmati.

Mari kita anggap respons Anda adalah "successData". Ini berisi daftar yang perlu Anda tambahkan sebagai opsi dalam menu dropdown.

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

Ini akan bekerja untuk Anda ....

coba Fungsi ini:

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