Membuat Chained Drop Down Berurutan Menggunakan PHP

Buat: 06/16/2013 - 00:22
Membuat Chained Drop Down Berurutan Menggunakan PHP

Chained dropdown adalah komponen form yang memungkinkan pengguna untuk memilih salah satu pilihan di sebuah dropdown/combobox yang merupakan sub dari data pada dropdown lainnya, yang menjadi parent dari dropdown sub tersebut. Tujuannya adalah mempermudah pengguna pada saat memilih karena jumlah data yang tampil lebih sedikit. Chained dropdown juga memperkecil kemungkinan pengguna salah input.

Misalnya ketika pengguna harus memilih kabupaten. Daripada menampilkan semua kabupaten di Indonesia, akan lebih mudah jika pengguna dapat memilih terlebih dahulu propinsi-nya, kemudian sistem menampilkan kabupaten di propinsi yang dipilih tersebut, lalu pengguna dapat memilih salah satu dari kabupaten yang ditampilkan.

File connect.php

<?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);
}

File index.php

<?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>

Pada javascript diatas, saya menggunakan jQuery. Anda bisa menggantinya menjadi $ misalkan sebagai berikut

$(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)
            })
        }
    })
})

Kemudian membuat file untuk merespon data yang kita kirimkan pada select pertama, file ini bertype json. Isi file getdata.php adalah sebagai berikut

<?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);

Untuk databsenya bisa di download di sini

Penampakan Membuat Chained Drop Down Berurutan Menggunakan PHP

About Author

Tentang PHP Indonesia

PHP Indonesia adalah sebuah komunitas untuk semua orang yang mencintai PHP. Fokus utama kami adalah pemrograman menggunakan bahasa PHP, namun tidak menutup kemungkinan pembahasan yang mencakup keseluruhan LAMP stack. Topik bisa dari pemrograman PHP, penanganan memcached, optimasi database, konfigurasi server, tuning server web, application deployment, framework PHP, hosting pilihan dan sebagainya.

Petunjuk Penulisan

Berikut ini adalah beberapa petunjuk penulisan artikel. Petunjuk dibuat bukan untuk membatasi tetapi demi menjaga kualitas artikel yang terpublikasi di situs ini. Selain itu, keseragaman gaya bahasa dapat menjaga readibilitas (tingkat keterbacaan) sehingga pembaca akan lebih nyaman dalam membaca artikel di situs ini.