Membuat Select Box Bertingkat (tingkat 3) Dengan Jquery Tanpa Ajax

Artikel kali ini merupakan artikel lanjutan yang pernah saya tulis sebelumnya. Hanya saja, pada kasus yang saya bahas kali ini yaitu membuat select Box bertingkat yang sampai tingkat 3 (tiga). Untuk prosesnya sama yaitu tanpa menggunakan ajax, dimana data akan diload semuanya baru nantinya di filter menggunakan jquery.

Baca Juga : Membuat Select Box Bertingkat Dengan Jquery (Tanpa Ajax)

Pada kasus sebelumnya data select yang digunakan hanya 2(dua) yaitu data provinsi dan kabupaten, namun pada kasus tingkat 3 ini saya menambahkan satu data select lagi yaitu data kecamatan. Untuk tujuannya sendiri tentunya agar ketika dipilih data pada provinsi maka data pada kabupaten dan kecamatan dapat difilter sesuai dengan provinsinya begitupun untuk data yang lainnya.
Tanpa panjang lebar lagi, mari kita mulai saja tutorialnya dibawah ini.

Sama seperti artikel sebelum sebelumnya, semua kelengkapan source pada artikel ini dapat di download pada bagian akhir artikel ini. Jadi nanti jika ada masalah saat mengikuti artikel ini, kalian dapat mendownloadnya ya…

Ok mari kita buat scriptnya :

File koneksi.php

<?php
$database = 'db_data_ajax';
$user = 'root';
$pass = '';
$host = 'localhost';

$conn = mysqli_connect($host,$user,$pass,$database);

if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

?>

file index.html

<html>
<head>

<link rel="stylesheet" href="css/bootstrap.css" type="text/css">

</head>
<body>

<?php
include"koneksi.php";

$sql = "select * from data_provinsi";
$result = mysqli_query($conn,$sql);

$sql_kabupaten = "select * from data_kabupaten";
$result_kabupaten = mysqli_query($conn,$sql_kabupaten);

$sql_kecamatan = "select a.id_kecamatan,a.nama_kecamatan,a.id_kabupaten,b.id_provinsi from data_kecamatan as a left join data_kabupaten as b on a.id_kabupaten=b.id_kabupaten";
$result_kecamatan = mysqli_query($conn,$sql_kecamatan);
?>
<div class="container">

<br>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Provinsi: </label>
<select name="combo_provinsi" id="combo_provinsi" class="form-control">
<option value="">--Pilih Provinsi--</option>
<?php
while($row=mysqli_fetch_assoc($result)){
echo'<option value="'.$row['id_provinsi'].'">'.$row['nama_provinsi'].'</option>';
}
?>
</select>
</div>
</div>

<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Kabupaten: </label>
<select name="combo_kabupaten" id="combo_kabupaten" class="form-control">
<option value="">--Pilih Kabupaten--</option>
<?php
while($row=mysqli_fetch_assoc($result_kabupaten)){
echo'<option class="dt_first '.$row['id_provinsi'].'" value="'.$row['id_kabupaten'].'">'.$row['nama_kabupaten'].'</option>';
}
?>
</select>
</div>
</div>

<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Kecamatan: </label>
<select name="combo_kecamatan" id="combo_kecamatan" class="form-control">
<option value="">--Pilih Kecamatan--</option>
<?php
while($row=mysqli_fetch_assoc($result_kecamatan)){
echo'<option class="dt_second df-'.$row['id_provinsi'].' ds-'.$row['id_kabupaten'].'" value="'.$row['id_kecamatan'].'">'.$row['nama_kecamatan'].'</option>';
}
?>
</select>
</div>
</div>

</div>
</div>


<script src="js/jquery-1.11.2.min.js"></script>

<script src="js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function(){
var combo_kabupaten = $("#combo_kabupaten");
var combo_kecamatan = $("#combo_kecamatan");

data_combo_kabupaten = combo_kabupaten.children(".dt_first").clone();
data_combo_kecamatan =combo_kecamatan.children(".dt_second").clone();

//change event ketika combo provinsi berubah
$("#combo_provinsi").change(function(){
var value = $(this).val();
combo_kabupaten.children(".dt_first").remove();
combo_kecamatan.children(".dt_second").remove();

if(value!==''){
//ketika tidak ada data provinsi yang dipilih
data_combo_kabupaten.clone().filter("."+value).appendTo(combo_kabupaten);
data_combo_kecamatan.clone().filter(".df-"+value).appendTo(combo_kecamatan);
} else {
data_combo_kabupaten.clone().appendTo(combo_kabupaten);
data_combo_kecamatan.clone().appendTo(combo_kecamatan);
}

});

//change event ketika combo kabupaten berubah
combo_kabupaten.change(function(){
var value = $(this).val();
var id_provinsi = $('#combo_provinsi').val();
combo_kecamatan.children(".dt_second").remove();
if(value!==''){
data_combo_kecamatan.clone().filter(".ds-"+value).appendTo(combo_kecamatan);
} else {
//ketika tidak ada data kabupaten yang dipilih
if(id_provinsi=='') {
data_combo_kecamatan.clone().appendTo(combo_kecamatan);
} else {
data_combo_kecamatan.clone().filter(".df-"+id_provinsi).appendTo(combo_kecamatan);
}
}
});

});
</script>
</body>

</html>

Jika sudah selesai semuanya, silahkan simpan project kalian dan jalankan pada browser. Sekian tutorial kali ini, jika masih ada yang belum dipahami bisa tinggalkan komentar di bawah ya,,