Combo Box / Select Option bertingkat dengan PHP, MySql dan jQuery

Combo Box atau Select Option bertingkat adalah dua atau lebih combo box yang dimana data yang ditampilkan dalam combo box tersebut berdasarkan pilihan combo box yang sebelumnya.contohnya adalah dalam tutorial kali ini penulis membuat dua buah combo box dimana combo box pertama berisikan data Provinsi sedangkan combo box kedua adalah data Kota, dimana saat User memilih combo box provinsi maka kota yang akan ditampilkan dalam combo box kota adalah kota yang terdapat di Provinsi tersebut.Untuk membuat combo box bertingkat ini "bahan-bahan" yang dibutuhkan antara lain :

1. database combo_box dengan tabel provinsi dan kota
2. file jQuery ( versi berapapun)

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`
  --
  
  INSERT INTO `kota` (`id_kota`, `id_prov`, `nm_kota`) VALUES
  (1, 1, 'SURABAYA'),
  (2, 1, 'SIDOARJO'),
  (3, 1, 'MOJOKERTO'),
  (4, 1, 'MALANG'),
  (6, 3, 'SOLO'),
  (7, 3, 'SEMARANG'),
  (8, 3, 'PEKALONGAN'),
  (9, 3, 'SURAKARTA'),
  (11, 2, 'BANDUNG'),
  (12, 2, 'BEKASI'),
  (13, 2, 'BOGOR'),
  (14, 2, 'CIREBON');

2. File jQuery download disini 

Tutorial

1. file koneksi database mysql

<?php 
/// edit sesuai dengan settingan database
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "combo_box";


$conn = mysql_connect("$dbhost","$dbuser","$dbpass");

if (!$conn) die ('Gagal Melakukan Koneksi');

mysql_select_db($dbname,$conn) or die ('Database Tidak Diketemukan di Server');
?>

2. file index.php atau file utama

<?php
    include "conn.php";
?>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
Provinsi : <select name="provinsi" id="provinsi">
    <option value="">- Pilih Tempat -</option>
   
    <!-- looping data provinsi -->
    <?php
    $sel_prov="select * from provinsi";
    $q=mysql_query($sel_prov);
    while($data_prov=mysql_fetch_array($q)){
   
    ?>
        <option value="<?php echo $data_prov["id_prov"] ?>"><?php echo $data_prov["nm_prov"] ?></option>
   
    <?php
    }
    ?>
</select>

    &nbsp;&nbsp;&nbsp;<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>

3. File cari_kota.php


<?php
    include "conn.php";
   
    $sel_prov="select * from kota where id_prov='".$_POST["prov"]."'";
    $q=mysql_query($sel_prov);
    while($data_prov=mysql_fetch_array($q)){
   
    ?>
        <option value="<?php echo $data_prov["id_kota"] ?>"><?php echo $data_prov["nm_kota"] ?></option><br>
   
    <?php
    }
    ?>

 Penjelasan :

saat combo box provinsi dengan atribut id="provinsi" berubah maka akan menjalankan code    $("#provinsi").change(function() dimana dalam function ini akan mengirimkan data id_provinsi dengan ajax (dibalik layar background) ke file cari_kota.php .dalam file cari_kota.php sendiri akan manampilkan option yang data kota berdasarkan id_provinsi yang dikirimkan dari file index.php. Jika file cari_kota.php berhasil menampilkan option, maka dalam file option tersebut akan ditampilkan pada combo box dengan atribut id="kota" dengan code  $("#kota").html(msg): . jika ingin Download file secara lengkap disini

Tampilan sebelum memilih provinsi

Tampilan setelah memilih provinsi Jawa Tengah , maka kota yang ditampilkan adalah kota yang terdapat di jawa tengah

09:36 Share: