Bagaimana Anda mengisi opsi elemen pilih dalam javascript?

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

Bagaimana cara mengisi opsi elemen pilih dalam JavaScript?

Bagaimana cara menambahkan opsi secara dinamis di pilih dalam JavaScript?

Bagaimana cara mengatur opsi di pilih dalam JavaScript?

Bagaimana cara menambahkan opsi ke dropdown di JavaScript?