Di akhir tutorial JavaScript ini, Anda akan mengetahui cara membuat daftar tarik-turun HTML secara dinamis menggunakan tag pilih Show Untuk mendemonstrasikannya, mari buat pemilih bendera negara seperti gambar di bawah ini Deklarasikan HTML Select Wrapper ElementPertama, buat tag pilih dengan id bernama countriesDropDown yang ingin Anda tambahkan opsi secara dinamis di dalamnya
Kemudian, tentukan referensi DOM-nya dalam JavaScript _Objek Data JavaScriptBerikut adalah model data sebagai objek JavaScript yang disebut countriesData dan memiliki beberapa properti dengan nama negara sebagai kunci dan ikon bendera sebagai nilainya
Biasanya, Anda ingin mengambil data dari sumber eksternal seperti database atau api. Demi kesederhanaan, saya hanya menggunakan objek JavaScript saja
Tambahkan Opsi Secara Dinamis Untuk Memilih ElemenSelanjutnya, 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
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
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 TurunSekarang, 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 _Kemudian, buat referensi DOM ke ikon bendera di JavaScript
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 _Kemudian, dapatkan nilai dari objek event yang diteruskan ke fungsi callback arrow dari event change dan atur nilainya ke innerHTML dari flag KesimpulanSekarang, 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 coba ini.private void FillMyDropDown() { int[] datearr = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 }; int daysInMonthNumber = System.DateTime.DaysInMonth(DateTime.Now.Year, DateTime.Now.Month); object[] currArray = new object[daysInMonthNumber]; Array.Copy(datearr, currArray, daysInMonthNumber); MyDropdownID.Items.AddRange(currArray); } Bagaimana Anda membuat kode setetesCara Membuat Menu Dropdown di HTML . Step 1: Add a Step 2: Add a Step 3: Create Langkah 4. Tambahkan nilai default dari daftar dropdown, jika diinginkan Bagaimana cara menambahkan nilai dalam dropdown menggunakan javascript?Pilih Metode add()
. Tip. Untuk menghapus opsi dari daftar drop-down, gunakan metode remove(). |