Bagaimana cara membuat daftar drop-down dinamis di html?

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

CREATE TABLE `dd_vals` (
  `index` int(11) NOT NULL,
  `category` varchar(255) NOT NULL,
  `dd_val` varchar(255) NOT NULL,
  UNIQUE KEY `index` (`index`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `dd_vals` (`index`, `category`, `dd_val`) VALUES (1, 'snacks', 'Chips'),
(2, 'snacks', 'Cookies'),
(3, 'beverages', 'Coffee'),
(4, 'beverages', 'Coke');

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

Bagaimana cara membuat daftar dropdown dinamis dalam HTML?

Bagaimana cara membuat dropdown dinamis?

Bagaimana cara membuat Dropdownlist di HTML?

Bagaimana cara membuat daftar dinamis dalam HTML menggunakan JavaScript?