Topik membuat select box bertingkat sebenarnya sudah pernah saya bahas pada postingan sebelumnya, namun disana saya menggunakan ajax untuk menampilkan data select yang dipilih. Kasus yang saya ambil yaitu select box yang umum digunakan, yaitu select box provinsi dan select box kabupaten yang mana kedua data tersebut berkaitan. Biar ga penasaran bisa dibaca dulu postingan saya sebelumnya di bawah ini :
Baca : Membuat Select Box Dengan Jquery dan PHP
Membuat Select Box Bertingkat (tingkat 3) Dengan Jquery Tanpa Ajax
Membuat Select Box Bertingkat (tingkat 3) Dengan Jquery Tanpa Ajax
Namun dari postingan saya sebelumnya tersebut, tentunya memiliki kekurangan yaitu adanya proses load data ke database dengan ajax. Hal ini bagi sebagian orang mungkin agak terganggu apalagi jika internet pas lagi lambat-lambatnya. Oleh karena itu artikel kali ini mungkin bisa mengatasi hal tersebut. Ok, kita mulai saja artikel Membuat Select Box Bertingkat Dengan Jquery (Tanpa Ajax) ini.
Gambar di atas merupakan struktur file yang saya gunakan, yang penting intinya ada file koneksi.php untuk koneksi ke database dan file index.php untuk file utamanya. Disini saya menggunakan framework CSS Bootstrap untuk mempercantik tampilannya.
*Seperti biasa semua kelengkapan file dalam artikel ini, sudah saya sediakan link downloadnya pada akhir artikel.
Pertama siapkan dulu databasenya, dimana ada tabel provinsi dan tabel kabupaten. file sql nya juga sudah saya sediakan untuk didownload.
Selanjutnya buat 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());
}
?>
Buat juga file index.php
<html>
<head>
<!-- CSS untuk bootstrap -->
<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);
?>
<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 '.$row['id_provinsi'].'" value="'.$row['id_kabupaten'].'">'.$row['nama_kabupaten'].'</option>';
}
?>
</select>
</div>
</div>
</div>
</div>
<!-- js untuk jquery -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- js untuk bootstrap -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var combo_kabupaten = $("#combo_kabupaten");
temp = combo_kabupaten.children(".dt").clone();
$("#combo_provinsi").change(function(){
var value = $(this).val();
combo_kabupaten.children(".dt").remove();
if(value!==''){
temp.clone().filter("."+value).appendTo(combo_kabupaten);
} else {
temp.clone().appendTo(combo_kabupaten);
}
});
});
</script>
</body>
</html>
Segitu aja, selanjutnya coba kita jalankan di browser dan dicoba untuk select box nya.
Cukup singkat bukan? jika ada yang belum dipahami bisa tinggalkan komentar dibawah ya...
gan kalau data yang di ambil dari satu table di database gimana penulisannya untuk combobox keduanya
ReplyDeleteBisa si seharusnya gan... kan brrti tinggal panggil query 2 kali pada tabel yang sama gan...
Deletebro, gabisa bro. yg ane bingung di database ente kok ada id_kecamatan juga? ane coba pake kodingan ane malah muncul semua yg di dbnya
ReplyDeleteemang muncul si seharusnya gan... cuma nanti ketika coba dipilih 1 provinsi nanti di kabupatennya otomatis tersortir datanya gan...
Deletegan,.. saya lom berhasil,.. apa karna table saya sudah ada foreign-key nya ? mohon pencerahannya gan,.. thanks mas bro
ReplyDeleteini link coding nya gan,... biar sekiranya sudi untuk dikoreksi gan,,,,, terima kasih ya mas bro
ReplyDeletehttps://pastebin.com/prFaDz4b
coding nya gak bisa di paste gan,... lewat dan pakai apa ya gan... ?
ReplyDeletebisa kok gan,,, tinggal blok terus klik kanan pilih copy gan..
DeleteThis comment has been removed by the author.
ReplyDeleteAw, it was a very good post. In idea I would like to devote writing such as this furthermore,?¡ìC spending time and specific work to produce a great article?- nonetheless so what can I say?- I waste time alot and never at all seem to obtain one thing completed. san fran design firms
ReplyDeleteSimply a smiling visitor here to share the love (:, btw outstanding design . "Audacity, more audacity and always audacity." by Georges Jacques Danton. iphone mockups
ReplyDeletehi, I’ve been ranking high for “free justin bieber stuff”. ipad mockups
ReplyDelete