Chained dropdown form is a component that allows the user to select an option in a dropdown / combobox which is a sub of data on other dropdown, which became the parent of the sub dropdown. The goal is to facilitate the user at the time of choosing because of the amount of data that appear fewer. Chained dropdown also minimize the possibility of any user input.
For example, when the user must choose the district. Rather than showing all districts in Indonesia, it will be easier if the user can choose his province first, then the system displays the selected districts in the province, then the user can choose one of the districts are shown.
connect.php file
For example, when the user must choose the district. Rather than showing all districts in Indonesia, it will be easier if the user can choose his province first, then the system displays the selected districts in the province, then the user can choose one of the districts are shown.
connect.php file
<?php
$host = "localhost";
$pass = "";
$user = "root";
$db = "wilayah";
$connect = mysql_connect($host,$user,$pass);
if(!$connect)
{
echo "Gagal Melakukan Koneksi Karena : ".mysql_error();
}
else
{
mysql_select_db($db);
}index.php file
<?php
include './connect.php';
?>
<!doctype HTML>
<html>
<head>
<title>Membuat Select Berdasarkan select sebelumnya</title>
<meta name="author" content="Chabib Nurozak">
<meta charset="UTF-8">
<script src='jquery.js'></script>
<script>
jQuery(document).ready(function(){
jQuery("#provinsi").change(function(){
var getValue= jQuery(this).val();
if(getValue == 0)
{
jQuery("#kota").html("<option>Pilih Provinsi Dulu</option>");
}
else
{
jQuery.getJSON('getdata.php',{'idprovinsi' : getValue},function(data){
var showData;
jQuery.each(data,function(index,value){
showData += "<option>"+value.kab_kota+"</option>";
})
jQuery("#kota").html(showData)
})
}
})
})
</script>
</head>
<body>
<strong>Pilih Provinsi :</strong><br/>
<select name="provinsi" id="provinsi">
<option value="0">Pilih Provinsi</option>
<?php
$query = "SELECT id_provinsi,provinsi FROM provinsi";
$result = mysql_query($query);
$output = '';
while($hasil = mysql_fetch_assoc($result))
{
$output .= "<option value='".$hasil['id_provinsi']."'>".$hasil['provinsi']."</option> \n";
}
echo $output;
?>
</select><br/>
<strong>Pilih Kota :</strong><br/>
<select name="kota" id="kota">
<option>Pilih Provinsi Dulu</option>
</select>
</body>
</html>In the above javascript, i use jQuery. You can change that to the $ example as follows
$(function(){
$("#provinsi").change(function(){
var getValue= $(this).val();
if(getValue == 0)
{
$("#kota").html("<option>Pilih Provinsi Dulu</option>");
}
else
{
$.getJSON('getdata.php',{'idprovinsi' : getValue},function(data){
var showData;
$.each(data,function(index,value){
showData += "<option>"+value.kab_kota+"</option>";
})
$("#kota").html(showData)
})
}
})
})Then create a file in response to the data that we send to select the first, it bertype json file. file getdata.php
<?php
include 'connect.php';
$id = isset($_GET['idprovinsi']) ? intval($_GET['idprovinsi']) : 0;
$query = "SELECT id_kab_kota,kab_kota FROM kab_kota WHERE id_provinsi='$id'";
$result = mysql_query($query);
$respon = array();
while ($hasil = mysql_fetch_array($result))
{
$respon[] = $hasil;
}
echo json_encode($respon);For databsenya can be downloaded at
