Hallo semua, ini post pertama saya. Di post ini saya akan mengajarkan bagaimana cara membuat dropdown berdasarkan value, studi kasus yang digunakan adalah untuk memilih wilayah.
Jadi ini contoh demo yang sudah jadi.
Langsung aja pertama kita butuh database wilayah di indonesia. Untuk itu sudah saya siapkan di sini file sql nya.
Selanjutnya kita harus membuat beberapa file konfigurasi untuk koneksi ke database dan untuk mengambil data dari database
1.config.php
<?php
$mysqli = new mysqli('localhost', 'root', '', 'db_daerah'); //sesuaikan dengan konfigurasi database kamu ya
if (mysqli_connect_error()) {
die('Connect Error (' . mysqli_connect_errno() . ') '. mysqli_connect_error());
}
?>
2. get_provinsi.php
<?php
include('config.php');$sql = "SELECT * FROM provinsi";
$query = $mysqli->query($sql);
$data = array();
while($row = $query->fetch_array(MYSQLI_ASSOC)){
$data[] = array("id_prov" => $row['id_prov'], "nama" => $row['nama']);
}
echo json_encode($data);?>
3. get_kabupaten.php
<?php
include('config.php');$id_prov = $_GET['id_prov'];
$sql = "SELECT * FROM kabupaten WHERE `id_prov` = '$id_prov'";
$query = $mysqli->query($sql);
$data = array();
while($row = $query->fetch_array(MYSQLI_ASSOC)){
$data[] = array("id_kab" => $row['id_kab'], "nama" => $row['nama']);
}
echo json_encode($data);?>
4. get_kecamatan.php
<?php
include('config.php');
$id_kab = $_GET['id_kab'];
$sql = "SELECT * FROM kecamatan WHERE `id_kab` = '$id_kab'";
$query = $mysqli->query($sql);
$data = array();
while($row = $query->fetch_array(MYSQLI_ASSOC)){
$data[] = array("id_kec" => $row['id_kec'], "nama" => $row['nama']);
}
echo json_encode($data);?>
5. get_kelurahan.php
<?php
include('config.php');
$id_kec = $_GET['id_kec'];
$sql = "SELECT * FROM kelurahan WHERE `id_kec` = '$id_kec'";
$query = $mysqli->query($sql);
$data = array();
while($row = $query->fetch_array(MYSQLI_ASSOC)){
$data[] = array("id_kel" => $row['id_kel'], "nama" => $row['nama']);
}
echo json_encode($data);?>
6. index.html
<html>
<head>
<title>Wilayah Based On Select</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="margin-top:100px;">
<div class="row">
<div class="col-lg-2"> </div>
<div class="col-lg-8">
<div class="row">
<div class="col-md-12">
<div class="form-group" style="position: static;">
<label for="Provinsi">Provinsi</label>
<select class="form-control" id="provinsi"></select>
</div> <div class="form-group" style="position: static;">
<label for="Kabupaten">Kabupaten</label>
<select class="form-control" id="kabupaten"></select>
</div>
<div class="form-group" style="position: static;">
<label for="Kecamatan">Kecamatan</label>
<select class="form-control" id="kecamatan"></select>
</div>
<div class="form-group" style="position: static;">
<label for="Kelurahan">Kelurahan</label>
<select class="form-control" id="kelurahan"></select>
</div>
</div>
</div>
</div>
<div class="col-lg-2"> </div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#provinsi").append('<option value="">Pilih</option>');
$("#kabupaten").html('');
$("#kecamatan").html('');
$("#kelurahan").html('');
$("#kabupaten").append('<option value="">Pilih</option>');
$("#kecamatan").append('<option value="">Pilih</option>');
$("#kelurahan").append('<option value="">Pilih</option>');
url = 'get_provinsi.php';
$.ajax({ url: url,
type: 'GET',
dataType: 'json',
success: function(result) {
for (var i = 0; i < result.length; i++)
$("#provinsi").append('<option value="' + result[i].id_prov + '">' + result[i].nama + '</option>');
}
});
});
$("#provinsi").change(function(){
var id_prov = $("#provinsi").val();
var url = 'get_kabupaten.php?id_prov=' + id_prov;
$("#kabupaten").html(''); $("#kecamatan").html('');
$("#kelurahan").html(''); $("#kabupaten").append('<option value="">Pilih</option>');
$("#kecamatan").append('<option value="">Pilih</option>');
$("#kelurahan").append('<option value="">Pilih</option>');
$.ajax({ url : url,
type: 'GET',
dataType : 'json',
success : function(result){
for(var i = 0; i < result.length; i++)
$("#kabupaten").append('<option value="'+ result[i].id_kab +'">' + result[i].nama + '</option>');
}
});
});
$("#kabupaten").change(function(){
var id_kab = $("#kabupaten").val();
var url = 'get_kecamatan.php?id_kab=' + id_kab;
$("#kecamatan").html(''); $("#kelurahan").html('');
$("#kecamatan").append('<option value="">Pilih</option>');
$("#kelurahan").append('<option value="">Pilih</option>');
$.ajax({ url : url,
type: 'GET',
dataType : 'json',
success : function(result){
for(var i = 0; i < result.length; i++)
$("#kecamatan").append('<option value="'+ result[i].id_kec +'">' + result[i].nama + '</option>');
}
});
});
$("#kecamatan").change(function(){
var id_kec = $("#kecamatan").val();
var url = 'get_kelurahan.php?id_kec=' + id_kec; $("#kelurahan").html('');
$("#kelurahan").append('<option value="">Pilih</option>');
$.ajax({ url : url,
type: 'GET',
dataType : 'json',
success : function(result){
for(var i = 0; i < result.length; i++)
$("#kelurahan").append('<option value="'+ result[i].id_kel +'">' + result[i].nama + '</option>');
}
});
});
</script>
</body>
</html>
Mungkin segini dulu ya, sampai ketemu di tutorial lainnya 😀
ada kendala pada import sqlnya. tpi dah ane perbaiki. BTW thanks yo bosss….
Iya sama” 😀
kalau boleh tahu errornya dimana gan? kalau boleh kirim juga ya
mungkin karna datanya kebesaran jadi kena limit untuk import di phpmyadmin, di coba import pakai sqlyog aja
Saya sudah cari2 contoh ini untuk form pendaftaran member di website saya, dan ini yang paling mudah dimengerti. Terima kasih mas atas sharing nya.
bagi dong sqlnya gan
https://hansendusenov.web.id/owncloud/index.php/s/OiH1mSAtbSBuQxB/download ini sql nya
sql error
error dmn ya?
DB Error, sudah diperbaiki.
terus, pada kelurahan tidak muncul isinya.
tidak muncul bagaimana?
db error…sql juga corupt..udh pakai phpmyadmin sama sqlyog
Errornya bagaimana ya? bisa kasih tau pesan errornya
Mantap mang, numpang sedot sqlnya
Trims
sama sama 😀
ada yang punya database nya yang bener dan bisa di import ?
masalahnya apa ya saat import?
saya coba tapi saya belum tau cara membuat konfigurasi databasenya supaya conect , tolong di pandu untuk konfigurasinya
databasenya menggunakan apa?
mau tanya kalau saya pakai database sql server untuk querynya mohon bantuan, saya sudah coba pakai sql server tidak bisa tks
tidak bisanya karena apa ya?
ada pesan errornya kah?
tutornya bermanfaat sekali mas..
tp ada satu pertanyaan bagaimana menampilkan data yg terakhir -> kelurahan, bukan dalam bentuk dropdown tapi tampil dalam format tabel html?
mis .
Kode Desa Nama Desa Ket
01 Desa A –
02 Desa B –
03 dst…
Terima kasih atas jawabannya…
itu bisa di kustom untuk query nya saja mas seperti di concat sebelum di tampilkan sesuai format yang dimisalkan.
Bisa minta semua file nya gak?. aku gak muncul di select nya. Apa salah query atau apa ya??
yang di dalam post ini udah semua codenya kok, bisa lihat di console browser errornya
gan,lihat hasilny dmn yah??atau ada tutor video nya gkk?
Hasilnya bisa lihat di link ini ya https://hansendusenov.web.id/demo/wilayah/
gan kok malah yang keluar di databasenya id nya, padahal pas dipilih namanya?
maksudnya gimana ya?
Ya jadi pas milih itu emang nama prov dsb, tapi pas di inupt ke db malah id nya yg ke input
maksudnya gimana ya?
I really appreciate your help with my project!