Membuat dropdown berantai versi 1
Dropdown berantai versi 1 ini kita menggunakan library bootstrap dan lebih banyak di phpnya dan ada sedikit setingan di javascriptnya beda dengan versi 2, untuk versi 2 nanti menggunakan banyak javascript.
Kali ini kita gunakan dropdown berantai ini untuk membuat lokasi provinsi sampai kecamatan. Langkahnya seperti ini :
- Download asset link rar atau link
- Download database link
- Lalu instal seperti biasa dan jalankan melalui localhost
- Buat file index.php dengan isi sebagai berikut
<!DOCTYPE html>
<html>
<head>
<title>Dropdown berantai versi 1</title>
</head>
<body>
<div class="row">
<div class="row form-group">
<label class="col-md-3">Provinsi</label>
<div class="col-md-5">
<select id="provinsi" class="form-control" name="provinsi">
<option value="">-- Pilih --</option>
<?php
$query = mysqli_query($con, "SELECT * FROM provinsi ORDER BY provinsi");
while ($row = mysqli_fetch_array($query)) { ?>
<option value="<?php echo $row['id_provinsi']; ?>">
<?php echo $row['provinsi']; ?>
</option>
<?php } ?>
</select>
</div>
</div>
<div class="row form-group">
<label class="col-md-3">Kabupaten</label>
<div class="col-md-5">
<select id="kota" class="form-control" name="kota">
<option value="">-- Pilih --</option>
<?php
$query = mysqli_query($con, "SELECT * FROM kota INNER JOIN provinsi ON kota.id_provinsi_fk = provinsi.id_provinsi ORDER BY nama_kota");
while ($row = mysqli_fetch_array($query)) { ?>
<option id="kota" class="<?php echo $row['id_provinsi']; ?>" value="<?php echo $row['id_kota']; ?>">
<?php echo $row['nama_kota']; ?>
</option>
<?php } ?>
</select>
</div>
</div>
<div class="row form-group">
<label class="col-md-3">Kecamatan</label>
<div class="col-md-5">
<select id="kecamatan" class="form-control" name="kecamatan">
<option value="">-- Pilih --</option>
<?php
$query = mysqli_query($con, "SELECT * FROM kecamatan INNER JOIN kota ON kecamatan.id_kota_fk = kota.id_kota ORDER BY nama_kecamatan");
while ($row = mysqli_fetch_array($query)) { ?>
<option id="kecamatan" class="<?php echo $row['id_kota']; ?>" value="<?php echo $row['id_kecamatan']; ?>">
<?php echo $row['nama_kecamatan']; ?>
</option>
<?php } ?>
</select>
</div>
</div>
<div>
<script src="asset3/js/jquery-chained.min.js"></script>
<script>
$(document).ready(function() {
$("#kota").chained("#provinsi");
$("#kecamatan").chained("#kota");
$("#desa").chained("#kecamatan");
});
</script>
</body>
</html>
0 Response to "Membuat dropdown berantai versi 1"
Post a Comment