Bagaimanakah Saya Boleh Menambah Pilihan dengan Cekap pada Elemen Pilih Menggunakan jQuery?

Pilihan Dipertingkatkan untuk Menambah Pilihan pada Pilihan menggunakan jQuery

Apabila bekerja dengan elemen terpilih, mungkin tiba masanya anda perlu secara dinamik isikannya dengan pilihan daripada objek JavaScript. jQuery menyediakan beberapa kaedah yang cekap untuk mencapai ini, dengan dan tanpa penggunaan pemalam.

Pilihan 1: jQuery asli

Untuk pendekatan jQuery asli, anda boleh menggunakan fungsi $.each() untuk mengulangi objek anda dan mencipta pilihan yang sepadan:

$.each(selectValues, function(key, value) {
    $('#mySelect').append($('<option>', { value: key }).text(value));
});

Pilihan 2: Pemalam jQuery

Jika anda lebih suka kemudahan kod prabungkus, terdapat banyak pemalam tersedia yang memudahkan proses.

• Pilih2: Ini pemalam yang kaya dengan ciri menawarkan pelbagai pilihan yang boleh disesuaikan, termasuk keupayaan untuk mengisi pilihan daripada JSON atau AJAX data.
• Dipilih: Terkenal dengan reka bentuk yang mesra pengguna, Chosen menyediakan antara muka yang menarik secara visual untuk memilih berbilang pilihan atau mencari nilai tertentu.
• MultiSelect : Direka khusus untuk mengendalikan elemen berbilang pilihan, MultiSelect membolehkan anda menambah, mengalih keluar dan menyusun semula dengan mudah pilihan.

Pelaksanaan yang Diperbaiki

Untuk mempertingkatkan penyelesaian yang disediakan, kami boleh menyelaraskan kod dengan menggunakan versi yang dioptimumkan berikut:

$.each(selectValues, function(key, value) {
    $('#mySelect').append($('<option></option>').attr('value', key).text(value));
});

Versi yang dioptimumkan ini menghapuskan teg penutup yang tidak perlu dan menggunakan peta untuk sifat pilihan dan bukannya penggabungan rentetan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Pilihan dengan Cekap pada Elemen Pilih Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!