Pilihan kota otomatis sesuai dengan propinsi menggunakan php ajax

pilihan kota otomatis php ajax

Dalam suatu Propinsi mempunyai beberapa kota. Ketika user memilih propinsi, maka pilihan kota akan otomatis terisi dengan kota-kota yang ada di propinsi tersebut. Contoh :  ketika user memilih Propinsi Sumatera Barat, maka otomatis akan terdapat pilihan kota Padang, Bukittinggi, Pariaman dan lainnya.

Langkah pertama siapkan dulu form input propinsi dan kota dengan nama pilih.php.
<html>
<head>
<title>Pilih kota otomatis</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<table></tbody>
<tr><td>
<select name='propinsi' onchange="htmlData('propinsi.php', 'pp='+this.value)" />
<option value="#">Pilih Propinsi</option>
<option value="DKIJakarta">DKI Jakarta</option>
<option value="Sumbar">Sumatera Barat</option>
<option value="Jateng">Jawa Tengah</option>
</select>
</td></tr>
<tr><td>
<select id='daftarkota' name='kota'>
<option value="#">Pilih Kota</option>
</select>
</td></tr>
</tbody></table>
</body>
</html>

Membuat file Ajax.js
function GetXmlHttpObject(handler)
{
   var objXMLHttp=null
   if (window.XMLHttpRequest)
   {
       objXMLHttp=new XMLHttpRequest()
   }
   else if (window.ActiveXObject)
   {
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
   }
   return objXMLHttp
}
function stateChanged()
{
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
           document.getElementById("daftarkota").innerHTML= xmlHttp.responseText;
   }
   else {
           //alert(xmlHttp.status);
   }
}
function htmlData(url, qStr)
{
   if (url.length==0)
   {
       document.getElementById("daftarkota").innerHTML="";
       return;
   }
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
       alert ("Browser does not support HTTP Request");
       return;
   }
   url=url+"?"+qStr;
   url=url+"&sid="+Math.random();
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true) ;
   xmlHttp.send(null);
}


Membuat file propinsi.php
<?php
if ($_GET['pp'] == '') {
?>
<select id="daftarkota" name="kota"><option value="#"> Pilih Kota </option></select>
<?php
}
if ($_GET['pp'] == 'DKIJakarta') {
?>
<select id="daftarkota" name="kota">
  <option value="#"> Pilih Kota </option>
  <option value="Jakarta Barat">Jakarta Barat</option>
  <option value="Jakarta Timur">Jakarta Timur</option>
  <option value="Jakarta Selatan">Jakarta Selatan</option>
</select>
<?php
}
if ($_GET['pp'] == 'Sumbar') {
?>
<select id="daftarkota" name="kota">
  <option value="#"> Pilih Kota </option>
  <option value="Padang">Padang</option>
  <option value="Bukittinggi">Bukittinggi</option>
  <option value="Pariaman">Pariaman</option>
</select>
<?php
}
if ($_GET['pp'] == 'Jateng') {
?>
<select id="daftarkota" name="kota">
  <option value="#"> Pilih Kota </option>
  <option value="Banyumas">Banyumas</option>
  <option value="Jepara">Jepara</option>
  <option value="Klaten">Klaten</option>
</select>
<?php
}
?>

Silahkan kembangkan script diatas...

Artikel Terkait






TermsPrivacy PolicyDisclaimerContact
Copyright © 2013 - Doky Asde Blog. All Rights Reserved.