cari_kota.php
<?php
include "conn.php";
$sel_prov="select * from kota where id_prov='".$_POST["prov"]."'";
$q=$mysqli->query($sel_prov);
while($data_prov=mysqli_fetch_array($q)){
?>
<option value="<?php echo $data_prov["id_kota"] ?>"><?php echo $data_prov["nm_kota"] ?></option><br>
<?php
}
?>
conn.php
<?php
/// edit sesuai dengan settingan database
// server info
$server = 'localhost';
$user = 'root';
$pass = '';
$db = 'combo_box';
// connect to the database
$mysqli = new mysqli($server, $user, $pass, $db);
// show errors (remove this line if on a live site)
mysqli_report(MYSQLI_REPORT_ERROR);
?>
index.php
<?php
include "conn.php";
?>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
Provinsi : <select name="provinsi" id="provinsi">
<option value="">- Pilih Tempat -</option>
<!-- looping data provinsi -->
<?php
$sel_prov="select * from provinsi";
$q=$mysqli->query($sel_prov);
while($data_prov=mysqli_fetch_array($q)){
?>
<option value="<?php echo $data_prov["id_prov"] ?>"><?php echo $data_prov["nm_prov"] ?></option>
<?php
}
?>
</select>
<img src="loader.gif" width="10px" height="10px" id="imgLoad" style="display:none">
<br>
<br>
Kota : <select name="kota" id="kota">
<!-- hasil data dari cari_kota.php akan ditampilkan disini -->
</select>
<script>
$("#provinsi").change(function(){
// variabel dari nilai combo box provinsi
var id_provinsi = $("#provinsi").val();
// tampilkan image load
$("#imgLoad").show("");
// mengirim dan mengambil data
$.ajax({
type: "POST",
dataType: "html",
url: "cari_kota.php",
data: "prov="+id_provinsi,
success: function(msg){
// jika tidak ada data
if(msg == ''){
alert('Tidak ada data Kota');
}
// jika dapat mengambil data,, tampilkan di combo box kota
else{
$("#kota").html(msg);
}
// hilangkan image load
$("#imgLoad").hide();
}
});
});
</script>
database:
1. Database
<?php
include "conn.php";
$sel_prov="select * from kota where id_prov='".$_POST["prov"]."'";
$q=$mysqli->query($sel_prov);
while($data_prov=mysqli_fetch_array($q)){
?>
<option value="<?php echo $data_prov["id_kota"] ?>"><?php echo $data_prov["nm_kota"] ?></option><br>
<?php
}
?>
conn.php
<?php
/// edit sesuai dengan settingan database
// server info
$server = 'localhost';
$user = 'root';
$pass = '';
$db = 'combo_box';
// connect to the database
$mysqli = new mysqli($server, $user, $pass, $db);
// show errors (remove this line if on a live site)
mysqli_report(MYSQLI_REPORT_ERROR);
?>
index.php
<?php
include "conn.php";
?>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
Provinsi : <select name="provinsi" id="provinsi">
<option value="">- Pilih Tempat -</option>
<!-- looping data provinsi -->
<?php
$sel_prov="select * from provinsi";
$q=$mysqli->query($sel_prov);
while($data_prov=mysqli_fetch_array($q)){
?>
<option value="<?php echo $data_prov["id_prov"] ?>"><?php echo $data_prov["nm_prov"] ?></option>
<?php
}
?>
</select>
<img src="loader.gif" width="10px" height="10px" id="imgLoad" style="display:none">
<br>
<br>
Kota : <select name="kota" id="kota">
<!-- hasil data dari cari_kota.php akan ditampilkan disini -->
</select>
<script>
$("#provinsi").change(function(){
// variabel dari nilai combo box provinsi
var id_provinsi = $("#provinsi").val();
// tampilkan image load
$("#imgLoad").show("");
// mengirim dan mengambil data
$.ajax({
type: "POST",
dataType: "html",
url: "cari_kota.php",
data: "prov="+id_provinsi,
success: function(msg){
// jika tidak ada data
if(msg == ''){
alert('Tidak ada data Kota');
}
// jika dapat mengambil data,, tampilkan di combo box kota
else{
$("#kota").html(msg);
}
// hilangkan image load
$("#imgLoad").hide();
}
});
});
</script>
database:
1. Database
- tabel provinsi
CREATE TABLE IF NOT EXISTS `provinsi` (
`id_prov` int(11) NOT NULL AUTO_INCREMENT,
`nm_prov` varchar(25) NOT NULL,
PRIMARY KEY (`id_prov`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
--
-- Dumping data for table `provinsi`
--
INSERT INTO `provinsi` (`id_prov`, `nm_prov`) VALUES
(1, 'JAWA TIMUR'),
(2, 'JAWA BARAT'),
(3, 'JAWA TENGAH'); - tabel kota
CREATE TABLE IF NOT EXISTS `kota` (
`id_kota` int(11) NOT NULL AUTO_INCREMENT,
`id_prov` int(11) NOT NULL,
`nm_kota` varchar(25) NOT NULL,
PRIMARY KEY (`id_kota`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;
--
-- Dumping data for table `kota`
--
Comments
Post a Comment