Untuk mengisi daftar pilihan dengan jQuery, gunakan for loop bersama append() dan tambahkan opsi ke pilihan yang sudah dibuat
Katakanlah kita memiliki pilihan berikut dengan opsi −
Contoh
Berikut ini adalah kode untuk menambahkan lebih banyak opsi menggunakan append() −
Demo Langsung
Document _Untuk menjalankan program di atas, simpan nama file anyName. html (indeks. html). Klik kanan pada file dan pilih opsi "Open with Live Server" di editor VS Code
Di akhir tutorial JavaScript ini, Anda akan mengetahui cara membuat daftar tarik-turun HTML secara dinamis menggunakan tag pilih
Untuk mendemonstrasikannya, mari buat pemilih bendera negara seperti gambar di bawah ini
Deklarasikan HTML Select Wrapper Element
Pertama, buat tag pilih dengan id bernama countriesDropDown yang ingin Anda tambahkan opsi secara dinamis di dalamnya
<select id="countriesDropDown"> </select>Kemudian, tentukan referensi DOM-nya dalam JavaScript
const countriesDropDown = document.getElementById("countriesDropDown");Objek Data JavaScript
Berikut adalah model data sebagai objek JavaScript yang disebut countriesData dan memiliki beberapa properti dengan nama negara sebagai kunci dan ikon bendera sebagai nilainya
const countriesData = { "Australia": "🇦🇺", "Canada": "🇨🇦", "UK": "🇬🇧", "USA": "🇺🇸" }_Biasanya, Anda ingin mengambil data dari sumber eksternal seperti database atau api. Demi kesederhanaan, saya hanya menggunakan objek JavaScript saja
Metode ini, sering disebut pendekatan berbasis data, sangat keren karena Anda dapat menambah atau menghapus item dari daftar drop-down tanpa menyentuh kode
Tambahkan Opsi Secara Dinamis Untuk Memilih Elemen
Selanjutnya, lakukan iterasi melalui objek countriesData menggunakan for. dalam loop dan buat variabel yang disebut kunci di header loop yang akan menyimpan kunci dari setiap properti, dalam hal ini, nama negara
for (let key in countriesData) { let option = document.createElement("option"); option.setAttribute('value', data[key]); let optionText = document.createTextNode(key); option.appendChild(optionText); countriesDropDown.appendChild(option); }Di dalam loop, buat elemen opsi dan simpan dalam variabel yang disebut opsi
Kemudian, tetapkan atribut value ke elemen opsi dan tetapkan nilainya ke nilai properti dari objek countriesData pada setiap iterasi
Saya tahu ini banyak menggunakan kata "nilai" dan saya harap Anda masih mengikuti…
Selanjutnya, tetapkan nilai variabel kunci yang dideklarasikan di header loop ke variabel yang disebut optionText
Setelah itu, tambahkan optionText ke elemen option
Terakhir, tambahkan elemen opsi ke countryDropDown yang telah dideklarasikan sebelumnya di tutorial ini
Jika Anda menjalankan aplikasi dan membuka konsol, Anda dapat melihat semua opsi ditambahkan secara dinamis ke tag pemilihan
Bagus
Lampirkan Ubah Acara Untuk Memilih Daftar Turun
Sekarang, saya ingin menampilkan ikon bendera di browser yang ditambahkan ke atribut value dari elemen opsi saat diklik
Untuk melakukannya, buat div dengan id bernama flag-icon di dalam indeks. html
<div id="flag-icon"> </div>_Kemudian, buat referensi DOM ke ikon bendera di JavaScript
const flagIcon = document.getElementById("flag-icon");Sekarang, saya hanya ingin menampilkan ikon bendera ketika negara yang sesuai dipilih dari daftar drop-down pilihan
Untuk melakukannya, lampirkan acara perubahan ke elemen pilih
countriesDropDown.addEventListener("change", e => { flagIcon.innerHTML = e.target.value; })_Kemudian, dapatkan nilai dari objek event yang diteruskan ke fungsi callback arrow dari event change dan atur nilainya ke innerHTML dari flag
Kesimpulan
Sekarang, Anda telah mempelajari cara membuat daftar tarik-turun Pilih HTML secara dinamis dalam JavaScript menggunakan pendekatan berbasis data. Dengan cara ini Anda dapat memiliki 4 opsi atau 400 opsi di sumber data Anda tanpa menyentuh kode dan itu akan berfungsi