jQuery Tutorial - Chained Combobox

by pino · June 16, 2023

4.67 / 5 5
1 / 5
2 / 5
3 / 5
4 / 5
5 / 5

3 votes, 4.67 avg. rating (93% score)

jQuery Tutorial - Chained Combobox. Tutorial kali ini saya akan membuat Chained Combobox dengan jQuery, sebagian dari anda mungkin tidak tahu apa itu chained combobox? seperti namanya chained dan combobox, berarti artinya combobox yang terhubung satu dengan yang lain. Ya, terhubung. Misalnya Anda memilih pilihan Buah pada combobox yang pertama, maka combobox yang kedua akan tampil jeruk, apel, nanas, semangka dan lanya.

Sudah paham kan apa itu chained combobox, oke jika sudah paham maka akan dilanjutnya dengan membuat tutorial yang sangat sederhana ini.

Nantinya akan dibuat 2 (dua) file PHP yaitu index.php dan select-request.php.

Sekarang buat file index.php dan ketikkan kode di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<title>Chained Select Tutorial</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
	<?php
	//membuat data combobox pertama dari array dibawah ini_get
	$makes = array('Acura', 'BMW', 'Lexus', 'Toyota', 'Honda');
	//menampilkan data jika tombol submit di klik
	if(isset($_POST['submit'])){
		echo '<pre>'; print_r($_POST); echo '</pre>';
	}
	?>
	<form action="" method="post">
		<select id="makes" name="makes"> <!-- membuat combobox pertama, dengan id makes -->
		<?php
		//menampilkan data dari array yang sudah di buat diatas
		foreach($makes as $m){ echo '<option value="'.$m.'">'.$m.'</option>'; }
		?>
		</select>
		<select id="models" name="models" style="display:none;"><!-- membuat combobox kedua dengan id models, dan display none agar tidak terlihat -->
		</select>
		<input id="submit" type="submit" name="submit" value="Submit" style="display:none;"> <!-- membuat submit dengan id submit, dan display none agar tidak terihat -->
	</form>
	<script>
	$('#makes').change(function(){ //jika combobox pertama nilainya berubah maka menjalankan script di bawah
		$('#models').css("display","block"); //menampilkan combobox kedua
		$('#models').change(function(){ //jika combobox kedua nilainya berubah
			$('#submit').css("display","block"); //menampilkan tombol submit
		});
		var make = $(this).val(); //menangkan nilai dari combobox pertama
		$.post('select-request.php', {make:make}, function(data){ // menjalankan ajax request dari file select-request.php dan mengirimkan variable make sebagai post variabel dengan nama make, dan mengembalikan info dengan variable data
			$('#models').html(data); //  menampilkan variabel data
		});
	});
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Chained Select Tutorial</title>

</head>

<body>

<?php

//membuat data combobox pertama dari array dibawah ini_get

$makes = array('Acura', 'BMW', 'Lexus', 'Toyota', 'Honda');

//menampilkan data jika tombol submit di klik

if(isset($_POST['submit'])){

echo '<pre>'; print_r($_POST); echo '</pre>';

}

<?php

//menampilkan data dari array yang sudah di buat diatas

foreach($makes as $m){ echo '<option value="'.$m.'">'.$m.'</option>'; }

</select>

</select>

</form>

$('#makes').change(function(){ //jika combobox pertama nilainya berubah maka menjalankan script di bawah

$('#models').css("display","block"); //menampilkan combobox kedua

$('#models').change(function(){ //jika combobox kedua nilainya berubah

$('#submit').css("display","block"); //menampilkan tombol submit

});

var make = $(this).val(); //menangkan nilai dari combobox pertama

$.post('select-request.php', {make:make}, function(data){ // menjalankan ajax request dari file select-request.php dan mengirimkan variable make sebagai post variabel dengan nama make, dan mengembalikan info dengan variable data

$('#models').html(data); // menampilkan variabel data

});

</script>

</body>

</html>

Dari kode di atas akan ada sebuah satu combobox yang tampil dengan pilihan Acura, BMW, Lexus, ‘Toyota, Honda yang dibuat pada baris ke-11.

Lah kok cuma 1 combobox, kode di atas kan ada dua combobox dan satu tombol submit? iza, combobox yang kedua akan muncul jika combobox pertama sudah dipilih, dan tombol submit akan tampil jika combobox yang kedua dipilih.

Lihat pada baris kode ke-33 dan 35-37. Penjelasan kode bisa dilihat pada kode diatas.

Selanjutnya buat file select-request.php dan ketikkan kode di bawah ini:

<?php
error_reporting(E_ALL); //menampilkan error
//membuat array untuk combobox yang kedua
$acura = array('Integra', 'TSX', 'MDX');
$bmw = array('1 Series', '3 Series', '5 Series', 'X5');
$lexus = array('ES300', 'GX470', 'GS350', 'LS400H');
$toyota = array('Venza', 'Camry', 'Corolla', 'Echo');
$honda = array('Pilot', 'Accord', 'Civic', 'Ridgeline');
//cek apakah sudah ada data dari post make
if(isset($_POST['make']))
{
	//merubah huruf menjadi kecil, agar sesuai dengan array di atas
	$model = strtolower($_POST['make']);
	//menampilkan data untuk combobox yang kedua, berdasarkan combobox pertama yang dipilih
	//dan data untuk combobox kedua dari array diatas.
	foreach($$model as $mo){ echo '<option value="'.$mo.'">'.$mo.'</option>'; }
}
?>