Dropdown dinamis adalah dropdown multi-level (atau dependen) yang menampilkan dropdown baru yang ditetapkan secara dinamis berdasarkan respons pengguna terhadap menu dropdown sebelumnya
Contohnya adalah tarik-turun Negara. Jika pengguna memilih “Amerika Serikat”, tarik-turun berikutnya menampilkan daftar Amerika Serikat. Jika mereka memilih "Kanada", dropdown akan menampilkan daftar Provinsi Kanada
Contoh lain mungkin saat pengguna memilih "Industri" mereka, dan Anda menampilkan dropdown subkategori kedua di industri tersebut
Menambahkan Dropdown Dinamis ke Formulir Anda
Di sini, kami akan menunjukkan cara membuat tarik-turun dinamis untuk menampilkan tarik-turun negara bagian atau provinsi berdasarkan negara mana yang dipilih pengunjung
Langkah 1. Buat Lightbox dengan Dua Bidang Formulir Dropdown
Di editor, buka tab formulir dan siapkan dua bidang khusus dengan jenis bidang Dropdown
Kustom 1. Negara (dengan AS dan Kanada)
Kustom 2. Negara Bagian atau Provinsi
Untuk kolom Kustom 1 (Negara), kami menentukan AS dan Kanada serta "Nilai yang Dikirim"
Karena tarik-turun Kustom 2 akan dinamis berdasarkan Pilihan Negara, tidak perlu memasukkan apa pun ke dalam kotak
Langkah 2. Tambahkan JavaScript Khusus ke Formulir Anda
Kami membutuhkan JS khusus yang mengubah nilai yang tersedia di Kustom 2 (baik negara bagian atau provinsi) berdasarkan nilai yang dipilih di Kustom 1 (AS atau Kanada). Pertama, dapatkan ID dropdown dan nilai opsi yang dipilih dari DevTools browser Anda
Anda memiliki satu menu tarik-turun, dan bergantung pada pilihan pengguna di dalamnya, tarik-turun kedua diisi dengan pilihan. Mari kita bahas tiga cara berbeda yang bisa Anda lakukan
Lihat Demo Unduh File
Markup
Sebagai contoh, markup akan selalu sama, hanya dua elemen pilihan sederhana. Yang pertama memiliki tiga opsi. Yang pertama hanya memberi tahu pengguna untuk memilih opsi, dan dua berikutnya adalah pilihan yang sebenarnya. Pilihan kedua hanya memiliki satu opsi yang memberi tahu pengguna untuk memilih dari dropdown pertama terlebih dahulu. Opsi pada dropdown kedua akan diganti secara dinamis
<select id="first-choice"> <option selected value="base">Please Select</option> <option value="beverages">Beverages</option> <option value="snacks">Snacks</option> </select> <br> <select id="second-choice"> <option>Please choose from above</option> </select>Pilihan 1. Menggunakan File Teks
Ide posting ini datang dari Robert Young yang menulis kepada saya untuk membagikan teknik ini. Idenya adalah mudah digunakan dan dipahami. Tidak semua orang ingin berurusan dengan database dan yang lainnya
Miliki satu file teks untuk setiap kemungkinan
Di dalam file teks tersebut, siapkan HTML pengganti untuk opsi baru yang siap digunakan
<option>Coffee</option> <option>Coke</option>_Sekarang kita akan menggunakan jQuery untuk melihat perubahan pemilihan pertama. Semua contoh kami akan menggunakan jQuery
$("#first-choice").change(function() { $("#second-choice").load("textdata/" + $(this).val() + ".txt"); });Ini bekerja dengan baik. Memang mudah dilakukan. Kelemahan potensialnya adalah 1) menyimpan data dalam tag HTML seperti itu mungkin bukan cara yang tepat, sulit untuk menggunakan kembali data itu karena alasan lain. 2) tidak super terukur, membutuhkan file teks baru untuk setiap kemungkinan
pilihan 2. Menggunakan Data JSON
Alternatifnya adalah menyimpan data yang Anda butuhkan dalam format JSON. Anda dapat memilikinya di JavaScript yang sedang Anda muat, atau menyimpannya di file eksternal. Untuk demo ini akan berupa file eksternal bernama data. json. Ini isinya
{ "beverages": "Coffee,Coke", "snacks": "Chips,Cookies" }Kami kembali melihat perubahan pada nilai pemilihan pertama, lalu memuat JSON dan mencari tahu bagian mana yang kami butuhkan
$("#first-choice").change(function() { var $dropdown = $(this); $.getJSON("jsondata/data.json", function(data) { var key = $dropdown.val(); var vals = []; switch(key) { case 'beverages': vals = data.beverages.split(","); break; case 'snacks': vals = data.snacks.split(","); break; case 'base': vals = ['Please choose from above']; } var $secondChoice = $("#second-choice"); $secondChoice.empty(); $.each(vals, function(index, value) { $secondChoice.append("<option>" + value + "</option>"); }); }); });_Keuntungannya di sini adalah kami menyimpan data secara umum, sehingga mudah untuk menggunakannya kembali untuk hal lain. Perhatikan kami menambahkan tag opsi di JavaScript itu sendiri, itu cukup fleksibel. Kerugian dari teknik ini adalah sedikit lebih rumit (tapi sungguh, tidak seburuk itu). Kami mungkin ingin mempertimbangkan memecah JSON menjadi file terpisah sehingga kami tidak perlu memuat semua data pada setiap perubahan, tetapi kemudian kami mengalami masalah skalabilitas yang sama dengan file teks. Memiliki basis data yang mengembalikan JSON kepada kami juga dimungkinkan di sini
Opsi 3. Menggunakan Basis Data
Kami masih akan menonton pemilihan pertama dengan jQuery, dan masih memuat opsi baru secara dinamis dengan jQuery. beban() fungsi. Tetapi untuk menarik dari basis data, kami memerlukan mitra perantara yang dapat membuat basis data itu berbicara untuk kami (JavaScript tidak dapat melakukannya sendiri). Jadi kita akan menggunakan file "getter. php”, dan itu akan menjadi file yang mengembalikan apa yang kita butuhkan
Pertama kita membutuhkan database yang sangat sederhana untuk ditarik
Sekarang kita dapat menanyakan database itu, di tabel "dd_vals" untuk entri yang memiliki makanan ringan atau minuman sebagai kategorinya dan mendapatkan apa yang kita inginkan. Permintaan kami harus berakhir seperti ini
SELECT * FROM dd_vals WHERE category='beverages'_Jadi mari kita membuat pengambil kita. php sambungkan ke database itu, dan miliki parameter GET untuk pilihan kategori, sambungkan itu ke dalam kueri, dan kembalikan apa yang ditemukannya di tag opsi
<?php $username = "username"; $password = "password"; $hostname = "localhost"; $dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL"); $selected = mysql_select_db("dropdownvalues", $dbhandle) or die("Could not select examples"); $choice = mysql_real_escape_string($_GET['choice']); $query = "SELECT * FROM dd_vals WHERE category='$choice'"; $result = mysql_query($query); while ($row = mysql_fetch_array($result)) { echo "<option>" . $row{'dd_val'} . "</option>"; } ?>Keith Silgard menulis untuk membantu saya memastikan ini aman. Setiap kali Anda menjalankan perintah basis data dengan data yang Anda terima melalui POST atau GET, Anda perlu memastikan bahwa data tersebut aman. Seperti, itu tidak mengandung kode yang sangat jahat seperti “; . Kode ini telah diperbarui untuk menggunakan mysql_real_escape_string guna memastikan hal itu tidak terjadi. Perhatikan juga fungsi ini hanya berfungsi dengan baik jika digunakan setelah koneksi database dibuat
Sekarang JavaScript kami sangat sederhana, kami kembali melihat perubahan pada dropdown pertama dan memuat di pengambil. php ke dropdown kedua. Trik mewah di sini adalah melewati pengambil. Parameter URL file php yang merupakan nilai dari dropdown pertama
$("#first-choice").change(function() { $("#second-choice").load("getter.php?choice=" + $("#first-choice").val()); });_Untuk situs web yang sangat sedikit dan contoh yang terisolasi, database dapat terasa seperti banyak pekerjaan atau bahkan berlebihan, tetapi ini adalah pilihan yang paling fleksibel. Kodenya bersih, cepat, data disimpan dengan cara yang bisa kita lakukan apa saja dengannya, dll
Bukan itu saja?
Seperti apa pun di web, bahkan ada lebih banyak cara untuk melakukannya. Kita bisa menyimpan nilai dalam array asosiatif. Kami bisa saja menggunakan MongoDB. Kita dapat memiliki berbagai pilihan yang siap digunakan di HTML dan menyembunyikan dan menampilkannya sesuai kebutuhan dengan JavaScript. Mereka semua memiliki kelebihan dan kekurangan
Lihat Demo Unduh File
Catatan. Saya tidak menyertakan contoh basis data dalam unduhan karena tidak akan berfungsi sampai Anda memiliki basis data sendiri untuk terhubung dan semua itu. Itu hanya akan kurang membingungkan seperti itu