Dropdown berantai versi 2
Dropdown berantai versi 2 ini mirip dengan dropdown berantai versi 1 namun yang membedakan adalah javascript pada versi 2 lebih banyak maka dari itu kangkah-langkahnya pun berbeda yaitu sebagai berikut :
- Sama seperti versi 1 dengan database yang sama
- Buat file index.php seperti dibawah
<!DOCTYPE html>
<html>
<head>
<title>Dropdown versi 2</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="row">
<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>
<script>
$("#kecamatan").change(function(){
var id_kec = $("#kecamatan").val();
var url = 'data/namadesa.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_desa +'">' + result[i].nama_desa + '</option>');
}
});
});
</script>
</div>
</div>
<div class="row form-group">
<label class="col-md-3">Desa</label>
<div class="col-md-5">
<select class="form-control select2" id="kelurahan" name="kelurahan" required >
<option value="">-- Pilih --</option>
</select>
</div>
</div>
</div>
</body>
</html>
- Buat file namadesa.php seperti dibawah
<?php
require '../koneksi.php';
$id_kec = $_GET['id_kec'];
$arr = array();
$arra = array();
$query = mysqli_query($con, "SELECT * FROM desa WHERE id_kecamatan_fk = '$id_kec'");
while($data = mysqli_fetch_array($query)){
$arra['id_desa'] = $data['id_desa'];
$arra['nama_desa'] = $data['nama_desa'];
array_push($arr, $arra);
}
echo json_encode($arr);
?>
0 Response to "Dropdown berantai versi 2"
Post a Comment