Combobox bertingkat dengan jQuery AJAX

Tutorial kali ini akan mengajarkan kalian caranya membuat combobox bertingkat dengan jQuery AJAX. Combobox bertingkat disini maksudnya adalah data yg ditampilkan nanti saling berhubungan misalnya data Propinsi dan Kota, Data Merk Kendaraan dengan Kendaraan, dll.

Untuk Contoh Tutorial yang dipakai kali ini saya akan memakai contoh Combobox bertingkat antara Data Jenis Kendaraan, Merk Kendaraan, dan Kendaraan itu sendiri. li ini akan mengajarkan kalian caranya membuat combobox bertingkat dengan jQuery AJAX. Combobox bertingkat disini maksudnya adalah data yg ditampilkan nanti saling berhubungan misalnya data Propinsi dan Kota, Data Merk Kendaraan dengan Kendaraan, dPertama buat dulu database nya dan buat 3 tabel berikut ini di MySQL anda.


"

Tabel Jenis Kendaraan

PHP Code:

CREATE TABLE `jenis_kendaraan` (
  `jnsKendaraanId` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,
  `jnsKendaraanNama` VARCHAR(50) NOT NULL,
  PRIMARY KEY (`jnsKendaraanId`)
) ENGINE=INNODB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1 

Tabel Merk

PHP Code:

CREATE TABLE `merk` (
  `merkId` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,
  `merkNama` VARCHAR(50) NOT NULL,
  `merkJnsKendaraanId` INT(11) UNSIGNED NOT NULL,
  PRIMARY KEY (`merkId`),
  KEY `FK_merk_jenis_kendaraan` (`merkJnsKendaraanId`),
  CONSTRAINT `FK_merk_jenis_kendaraan` FOREIGN KEY (`merkJnsKendaraanId`) REFERENCES `jenis_kendaraan` (`jnsKendaraanId`) ON UPDATE CASCADE ) ENGINE=INNODB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1 

Tabel Kendaraan

PHP Code:

CREATE TABLE `kendaraan` (
  `kenId` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,
  `kenNama` VARCHAR(100) NOT NULL,
  `kenMerkId` INT(11) UNSIGNED NOT NULL,
  PRIMARY KEY (`kenId`),
  KEY `FK_kendaraan_merk` (`kenMerkId`),
  CONSTRAINT `FK_kendaraan_merk` FOREIGN KEY (`kenMerkId`) REFERENCES `merk` (`merkId`) ON UPDATE CASCADE ) ENGINE=INNODB AUTO_INCREMENT=14 DEFAULT CHARSET=latin1 

Relasi antar 3 tabel ini adalah seperti yang ada digambar ini.


Tabel nya bisa diisi data dengan data-data seperti berikut

Tabel Jenis Kendaraan


Tabel Merk Kendaraan


Tabel Kendaraan


di halaman index.php untuk formnya kita dikasih dulu combo box yang digenerate dari php. potongan programnya seperti dibawah ini

PHP Code:

require_once "db.php";
//ambil data combo box jenis kendaraan $sql = "
SELECT
    jnsKendaraanId,
    jnsKendaraanNama
FROM
    jenis_kendaraan
ORDER BY jnsKendaraanNama
"; $getComboJnsKendaraan = mysql_query($sql,$koneksi) or die ('Query Gagal'); 

dan untuk di bagian html formnya seperti ini

PHP Code:

<form>
<table width="500" border="0" id="tabelForm">
<tr>
    <td width="120">Jenis Kendaraan</td>
    <td>                    
        <select name="cmbJnsKendaraan" id="cmbJnsKendaraan">
            <option value="">--Pilih Jenis Kendaraan--</option>
            <?php
                while($data = mysql_fetch_array($getComboJnsKendaraan)){
                    echo '<option value="'.$data['jnsKendaraanId'].'">'.$data['jnsKendaraanNama'].'</option>';
                }
            ?>                                                
        </select>
        <img src="loading.gif" width="18" id="imgLoad" style="display:none;" />                    
    </td>
</tr>
<tr>
    <td width="120">Merk Kendaraan</td>
    <td>                    
        <select name="cmbMerkKendaraan" id="cmbMerkKendaraan">
            <option value="">--Pilih Merk Kendaraan--</option>                                                                        
        </select>
        <img src="loading.gif" width="18" id="imgLoadMerk" style="display:none;" />                    
    </td>
</tr>
<tr>
    <td width="120">Kendaraan</td>
    <td>                    
        <select name="cmbKendaraan" id="cmbKendaraan">
            <option value="">--Pilih Kendaraan--</option>                                                                        
        </select>                    
    </td>
</tr>
</table>                    
</form>

Sesudah form kita terbentuk maka kita bisa tambahkan zscript js untuk melakukan pemanggilan AJAX dengan jQuery

PHP Code:

$(function() {
/*event onChange combobox jenis kendaraan*/ $("#cmbJnsKendaraan").change(function(){
    /*tampilkan image loading, untuk pertanda proses berjalan*/    
    $("img#imgLoad").show();
    /*ambil nilai jenis kendaraan*/
    var idJenisKendaraan = $(this).val();
    
    /*lakukan pemanggilan ajax ke file getMerk.php*/
    $.ajax({
       type: "POST", /*tipe post*/
       dataType: "html", /*kembalian berupa html*/
       url: "getMerk.php",
       data: "idJenisKendaraan="+idJenisKendaraan, /*kirim parameter*/
       success: function(msg){ /*jika pemanggilan ajax sukses*/
          if(msg == ''){
                  /*isi combobox merk kendaraan*/        
                $("select#cmbMerkKendaraan").html('<option value="">--Pilih Merk Kendaraan--</option>');
                
                /*isi combobox kendaraan*/
                $("select#cmbKendaraan").html('<option value="">--Pilih Kendaraan--</option>');
          }else{
                  /*isi combobox merk kendaraan*/
                  $("select#cmbMerkKendaraan").html(msg);                                             
          }
          
          /*sembunyikan image loading*/
          $("img#imgLoad").hide();
          
          /*jalankan fungsi getAjaxKendaraan()*/
          getAjaxKendaraan();                                               
       }
    });                
});
/*event onChange combobox merk kendaraan dengan langsung 
menjalankan fungis getAjaxKendaraan()*/ $("#cmbMerkKendaraan").change(getAjaxKendaraan);
function getAjaxKendaraan(){
    $("img#imgLoadMerk").show();
    var idMerkKendaraan = $("#cmbMerkKendaraan").val();
    
    $.ajax({
       type: "POST",
       dataType: "html",
       url: "getKendaraan.php",
       data: "idMerkKendaraan="+idMerkKendaraan,
       success: function(msg){
          if(msg == ''){
                $("select#cmbKendaraan").html('<option value="">--Pilih Kendaraan--</option>');                                                                   
          }else{
                  $("select#cmbKendaraan").html(msg);                         
          }
          $("img#imgLoadMerk").hide();                                               
       }
    });
}    
}); 

untuk isi file getMerk.php adalah seperti ini

PHP Code:

//ambil parameter $idJenisKendaraan = $_POST['idJenisKendaraan'];

if($idJenisKendaraan == ''){

    /*jika tidak dapat parameter apa2, maka kembalikan nilai kosong*/
    exit;
}else{

    /*cari list merk yg sesuai di db*/    
    $sql = "
        SELECT
            merkId,
            merkNama
        FROM
            merk
        WHERE
            merkJnsKendaraanId = '$idJenisKendaraan'
        ORDER BY merkNama
    ";
    $getMerkKendaraan = mysql_query($sql,$koneksi) or die ('Query Gagal');
    
    /*tampilkan list merknya (ditangkap sebagai msg kembalian nantinya)*/
    while($data = mysql_fetch_array($getMerkKendaraan)){
        echo '<option value="'.$data['merkId'].'">'.$data['merkNama'].'</option>';
    }
    exit;    
} 

Sama juga halnya dengan file getKendaraan.php yg berisi seperti ini

PHP Code:

//ambil parameter $idMerkKendaraan = $_POST['idMerkKendaraan'];

if($idMerkKendaraan == ''){
    exit;
}else{
    $sql = "
        SELECT
            kenId,
            kenNama
        FROM
            kendaraan
        WHERE
            kenMerkId = '$idMerkKendaraan'
        ORDER BY kenNama
    ";
    $getKendaraan = mysql_query($sql,$koneksi) or die ('Query Gagal');
    while($data = mysql_fetch_array($getKendaraan)){
        echo '<option value="'.$data['kenId'].'">'.$data['kenNama'].'</option>';
    }
    exit;    
} 

Untuk lebih jelasnya bisa langsung download source codenya dan coba dilocalhost masing2. Dijamin jadi lebih ngerti. kalau tidak dicoba langsung biasanya susah ngertinya. Combobox bertingkat gini biasanya berguna untuk tampilkan kategori dan sub kategori suatu produk dan yg paling banyak dijumpai biasanya memang dari Propinsi ke kota. Sekian tutorial kali ini, semoga bisa banyak membantu. Oh ya untuk tutorial berikut mungkin ada yg mau kasih ide untuk tulis tutorial tentang apa gitu? hehe bisa langsung dikomentarnya aja yac...

Sumber : kaskus