Tutorial Jquery Chained Combobox

jquery-chained

Alhamdulillah, apa kabar pembaca sekalian ? semoga diberikan rahmat selalu, aamin. Tutorial kali ini mengupas study kasus tentang jquery chained combo box pada portal donasi online Dompet Dhuafa.

Beberapa waktu lalu team fundrising dari Dompet Dhuafa menghubungi saya dan berdiskusi tentang donasi yang memiliki jenis pengkhususan, misal donasi zakat, maka pilihan selanjutkan akan muncul pilihan zakat maal, zakat fitrah dsb. Jika memilih menu infak / sedekah, maka combo box selanjutnya akan muncul pilihan pengkhususan donasi infak yang diinginkan.

Dalam dunia jquery, ada banyak metode yang dapat dipakai, bisa memakai jquery change, ketika combo box pertama dipilih maka menu selanjutnya di load sesuai dengan pilihan pertama, bisa juga menggunakan jquery population combo box, yaitu dengan membuat sejumlah list array yang kemudian disortir berdasarkan datanya.

Dari sekian cara yang ada, saya mau mencoba menggunakan pendekatan yang baru, yaitu dengan menggunakan jquery chained box. Jquery yang kita gunakan diambil dari github : https://github.com/tuupola/jquery_chained

Tutorial lengkap tentang jquery chained combo box sebagai berikut :

  1. Langkah awal, download terlebih dahulu jquery plugin chained combo box pada alamat : https://github.com/tuupola/jquery_chained
  2. Pilih menu download zip, kemudian extract, misal nama foldernya : jquery-combobox
  3. Ambil 2 file : test/vendor/jquery-1.10.2.js dan jquery.chained.js, letakkan pada folder terpisah
  4. Buat sebuah file html sebagai berikut :

 

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>jquery chained combox</title>
	</head>
	<body>

		<select id="donasi" name="donasi1">
		  <option value="">- Pilih jenis donasi -</option>
		  <option value="zakat">Zakat</option>
		  <option value="infak">Infak</option>
		</select>

		<select id="donasi2" name="donasi2">
		  <option value="">- Pilih pengkhususan donasi-</option>

		  <!-- data zakat -->
		  <option value="Zakat Maal" class="zakat">Zakat Maal</option>
		  <option value="Zakat fitrah" class="bmw">Zakat Fitrah</option>

		  <!-- data infak -->
		  <option value="Sehat Milik Semua" class="infak">Sehat Milik Semua</option>
		  <option value="Amazing Muslimah" class="infak">Amazing Muslimah</option>
		  <option value="Love Rohingnya" class="infak">Love Rohingnya</option>
		</select>		
	</body>
</html>

sebelum tag akhir body, letakkan javascript

<script src="jquery-1.11.0.js"></script>
<script src="jquery.chained.js"></script>

Setelah menginclude javascript, sekarang saatnya melakukan inisiasi jquery, di bawah script javascript, buat script sebagai berikut :

<script>
$("#donasi2").chained("#donasi1");
</script>

Simpan semua script di atas, kemudian jalankan, voila :D, jquery chained combo box berhasil, untuk demo akhir dapat di lihat di bawah ini, jika kamu mengalami kendala dalam membuat script di atas silahkan tuliskan pada kotak komentar.

Demo Jquery Chained Combo Box :

About Author:

One thought on “Tutorial Jquery Chained Combobox

Leave A Comment

Your email address will not be published. Required fields are marked *