Beranda > Ajax, Programing > Sselect Onchange Dengan Jquery

Sselect Onchange Dengan Jquery

Persiapan

1. Download lates jquery

2. siapkan sebuah file index dan file data (saya pake php)

file index isinya :

<html>
<script src=”jquery-1.8.2.min.js”></script>
<script>
$(document).ready(function(){
$(“#selarea”).change(function(){
var area = $(this).val();
//alert(area);
var dataString = ‘area=’+area;
if (area != “”){
$.ajax({
url: ‘data.php’,
type: ‘GET’,
data: dataString,
success:function(data){
$(‘#sellokasi’).html(data);
},
error:{}
})
} else {

}
});
});
</script>
<body>
<?php
$array = array(
“Jakarta Barat”=>array(“Kelapa Gading”=>array(“Kelapa Gading Barat”,”Kelapa Gading Timur”,”Pegangsaan dua”)),
“Jakarta Pusat”=>array(“Kemayoran”=>array(“gunung sahari selatan”,”kemayoran”,”kebon kosong”,”harapan mulya”),
“Menteng”=>array(“Menteng”,”Pegangsaan”,”Cikini”,”Kebon Sirih”,”Gondangdia”)
)
);
?>
<table>
<tr>
<td>
<select id=”selarea”>
<option>Pilih Area Dibawah Ini</option>
<?php
foreach($array as $key => $value){
echo “<option value=\”$key\”>”.$key.”</option>”;
foreach($value as $k => $v){
echo “<option value=\”$k\”>&nbsp;&nbsp;&nbsp”.$k.”</option>”;
}
}
?>

</select>
&nbsp;&nbsp
<select id=”sellokasi”>
<option>Pilih Area</option>
</select>
</td>
</tr>
</table>

</body>
</html>

 

file data isinya :

<?php

$array = array(
“Jakarta Barat”=>array(“Kelapa Gading”=>array(“Kelapa Gading Barat”,”Kelapa Gading Timur”,”Pegangsaan dua”)),
“Jakarta Pusat”=>array(“Kemayoran”=>array(“gunung sahari selatan”,”kemayoran”,”kebon kosong”,”harapan mulya”),
“Menteng”=>array(“Menteng”,”Pegangsaan”,”Cikini”,”Kebon Sirih”,”Gondangdia”)
)
);

if(isset($_GET[‘area’])){
$area = $_GET[‘area’];

//echo “<option>”.$area.”</option>”;

foreach($array as $key => $value){
if(in_array($area, (array)$key )){
echo “<option>”.$key.”</option>”;
} else {
foreach($value as $k => $v){
if(in_array($area, (array)$k)){
$count = count($v);
for($i=0; $i<$count; $i++){
echo “<option>”.$v[$i].”</option>”;
}
}
}
}
}

}
?>

Kategori:Ajax, Programing
  1. Belum ada komentar.
  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: