31600 Views

Cara Membuat Combo Box Select Propinsi,Kota/Kab,dan Kecamatan

Membuat Menu Combo Box yang dimaksud didini adalah menu bertingkat atau saling berkaitan satu sama lain dengan PHP dan JQuery. ComboBox yang seperti ini sering kita jumpai pada form pendaftaran atau toko online yang menyertakan alamat dari mulai Propinsi kemudian pilih Kota/Kab dan selanjutnya pilih Kecamatan.

Cara kerja Combo Box bertingkat ini pertama user/pengguna disuruh untuk memilih Propinsi pada Box pertama,setelah itu Box kedua akan terbuka nama-nama Kota/Kabupaten dari Propinsi yang dipilih pada Box pertama dan begitu juga seterusnya.

combobox

Combobox saling berkaitan ini adalah dengan memanfaatkan script Jquery dan berikut cara membuat Combox Bertingkat saling berkaitan,pertama kita buat file untuk menampilkan halaman dengan nama index.php

<html>
<head><title>Select Chain</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var htmlobjek;
$(document).ready(function(){
  //apabila terjadi event onchange terhadap object <select id=propinsi>
  $("#propinsi").change(function(){
    var propinsi = $("#propinsi").val();
    $.ajax({
        url: "ambilkota.php",
        data: "propinsi="+propinsi,
        cache: false,
        success: function(msg){
            //jika data sukses diambil dari server kita tampilkan
            //di <select id=kota>
            $("#kota").html(msg);
        }
    });
  });
  $("#kota").change(function(){
    var kota = $("#kota").val();
    $.ajax({
        url: "ambilkecamatan.php",
        data: "kota="+kota,
        cache: false,
        success: function(msg){
            $("#kec").html(msg);
        }
    });
  });
});

</script>
</head>
<body>
<?php
mysql_connect("localhost","root","");
mysql_select_db("provkabkotkec");
?>
Pilih Provinsi :<br>
<select name="propinsi" id="propinsi">
<option>--Pilih Provinsi--</option>
<?php
//mengambil nama-nama propinsi yang ada di database
$propinsi = mysql_query("SELECT * FROM prov ORDER BY nama_prov");
while($p=mysql_fetch_array($propinsi)){
echo "<option value=\"$p[id_prov]\">$p[nama_prov]</option>\n";
}
?>
</select>
<br>Pilih Kabupaten/Kota :<br>
<select name="kota" id="kota">
<option>--Pilih Kabupaten/Kota--</option>
<?php
//mengambil nama-nama propinsi yang ada di database
$kota = mysql_query("SELECT * FROM kabkot ORDER BY nama_kabkot");
while($p=mysql_fetch_array($propinsi)){
echo "<option value=\"$p[id_kabkot]\">$p[nama_kabkot]</option>\n";
}
?>
</select>

<br>Pilih Kecamatan :<br>
<select name="kec" id="kec">
<option>--Pilih Kecamatan--</option>
</select>
</body>
</html>

Selanjutnya buat file php dengan nama ambilkota.php seperti berikut :

<?php
mysql_connect("localhost","root","");
mysql_select_db("provkabkotkec");
$propinsi = $_GET['propinsi'];
$kota = mysql_query("SELECT id_kabkot,nama_kabkot FROM kabkot WHERE id_prov='$propinsi' order by nama_kabkot");
echo "<option>-- Pilih Kabupaten/Kota --</option>";
while($k = mysql_fetch_array($kota)){
    echo "<option value=\"".$k['id_kabkot']."\">".$k['nama_kabkot']."</option>\n";
}
?>

Kemudian file kecamatan dengan nama ambilkecamatan.php seperti berikut ini:

<?php
mysql_connect("localhost","root","");
mysql_select_db("provkabkotkec");
$kota = $_GET['kota'];
$kec = mysql_query("SELECT id_kec,nama_kec FROM kec WHERE id_kabkot='$kota' order by nama_kec");
echo "<option>-- Pilih Kecamatan --</option>";
while($k = mysql_fetch_array($kec)){
    echo "<option value=\"".$k['id_kec']."\">".$k['nama_kec']."</option>\n";
}
?>

Tak lupa juga buat sebuah database dan isikan nama dan password database tersebut dalam file-file diatas,disini database sudah disiapkan dalam source code yang bisa anda download pada akhir postingan ini.

Untuk melihat hasil Combo Box bertingkat saling berkaitan silahkan lihat demonya disini

Silahkan download source code-nya disini

 

Kata Kunci :

Comments

  1. Reply

  2. Reply

  3. By Wiko

    Reply

  4. By laewink

    Reply

  5. By Cimon

    Reply

  6. By AS

    Reply

  7. Reply

    • By admin

      Reply

      • By gusputra

        Reply

    • Reply

  8. By andrie

    Reply

  9. By Herfian

    Reply

  10. By diar

    Reply

  11. By joe

    Reply

  12. By Heddy

    Reply

  13. By ngampus

    Reply

  14. Reply

  15. Reply

  16. By wawan

    Reply

  17. By cyberxsur

    Reply

  18. By laewink

    Reply

  19. Reply

  20. By Mas Gus

    Reply

  21. By NEwbie

    Reply

  22. Reply

  23. Reply

  24. By android sttnj

    Reply

  25. By Tau Ga Sih

    Reply

  26. By danang

    Reply

  27. Reply

  28. By Alexander

    Reply

  29. By Robot

    Reply

  30. By ishak

    Reply

  31. By h_n

    Reply

  32. By bagus

    Reply

  33. By Bahrul

    Reply

  34. By maswes

    Reply

  35. By elnur

    Reply

  36. By kodekunci

    Reply

  37. By Nando

    Reply

  38. By noe

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *