Bagaimana cara menambahkan opsi ke DropDownList menggunakan jQuery?


291

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

Terima kasih


Hanya ingin tahu, mengapa pertanyaan ini diturunkan? Mungkin karena tidak menunjukkan potongan kode :)
shasi kanth

Jawaban:


451

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!


8
Parameter metode agak menyesatkan, fungsi (val, teks) harus fungsi (indeks, opsi) misalnya. Jika tidak, berfungsi dengan baik.
mbillard

14
@ Crossbrowser: Saya tidak setuju - valdan textbenar - benar menggambarkan variabel dan penggunaannya.
nickf

1
untuk contoh itu saja, namun sebagai metode tujuan umum, variabel-variabel itu menyesatkan (tidak memberi saya petunjuk bagaimana menggunakan metode itu). Namun, saya akan memberikan bahwa jawabannya bukan tentang penggunaan metode $ .each.
mbillard

1
Saya sebelumnya menggunakan mySelect.append(new Option(text, val));, yang tidak berfungsi di IE8. Saya harus beralih ke @ nickf'smySelect.append($('<option></option>').val(val).html(text));
Matthew Clark

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

167

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

1
Bagaimana Anda mengatur properti seperti memilih nilai default?
Krishnan

20
Saya suka yang ini lebih baik daripada "<option></option>"metodenya; itu tampak kotor.
Josh M.

1
tidak berfungsi di ie8 .. coba saja dan lihat komentar lain di bawah ini.
briansol

13

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

11

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

7

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


1
Jika Anda menggunakan tanda kutip ganda di dalam parameter opsi Anda, mereka akan menutup fungsi dan merusak skrip. Mengganti .prepend("...") / $("...")ke .prepend('...') / $('...')akan memperbaiki cuplikan.
Heraldmonkey

4

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($("&lt;option/&gt;").attr("value", val).text(text));
});

3

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



0

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 ..


0

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.


Mengapa Anda menambah penghitung di masing-masing? Apakah Anda baru menggunakan jquery? var counter = $ ('[id * = "ddlPosition _"]'). Panjangnya kurang verbose dan lebih efisien. Saya pikir Anda perlu sedikit lebih banyak pengalaman sebelum mulai memposting kode Anda. Ini bukan kode kualitas produksi karena ditulis dengan buruk dan terlalu rumit untuk tugas sepele seperti itu. Jangan tersinggung tetapi ada alasan Anda memiliki 58 jawaban dan tidak ada suara.
Athens Holloway

Anda jelas salah paham tentang apa yang saya buat. Penghitungnya adalah untuk menambah nilai yang diposting di drop down, dan saya punya beberapa dengan ID yang sama, hanya dengan "_ ##" yang berbeda di akhir, jadi .length () pasti tidak akurat. Itulah alasan "id * =" di pemilih.
vapcguy

Adapun jawaban saya yang lain, umumnya saya menganjurkan metode yang lebih sederhana bila memungkinkan, dan jika orang tidak begitu esoterik dengan pengkodean mereka dan menulis hal-hal yang lebih disederhanakan, jawaban saya mungkin akan memiliki lebih banyak suara. Tetapi orang-orang ingin membuat diri mereka terlihat pintar sehingga mereka tidak akan memilih sesuatu yang begitu sederhana. Tidak membuat saya salah karena hanya ingin industri. Saya tidak menikmati pemecahan masalah atau membuat kode orang lain yang jauh lebih rumit daripada yang seharusnya.
vapcguy

Saya juga mungkin lebih percaya diri pada $ (this) .length () di loop itu lebih banyak jika seseorang dapat menjelaskan mengapa mengirim "$ (this)" daripada objek ke myAppender tidak berfungsi.
vapcguy

0

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 ....


-1

coba Fungsi ini:

function addtoselect(param,value){
    $('#mySelectBox').append('&lt;option value='+value+'&gt;'+param+'&lt;/option&gt;');
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.