Membuat Combo-box kategori dengan jQuery

Kali ini saya coba share cara membuat combo-box kategori dengan jquery artinya kita membuat kategori turunan dari kategori utama tersebut. Sebagai contoh kita buat database contoh dan tabelnya saya kasih nama combo_box_kategori.

Langkah pertama Anda buat databasenya

CREATE DATABASE `contoh` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `contoh`;

Kemudian buat tabelnya dengan kode di bawah ini.

CREATE TABLE `combo_box_kategori` (
  `id_utama` int(11) NOT NULL AUTO_INCREMENT,
  `id_sub` int(11) NOT NULL,
  `nama` varchar(225) COLLATE latin1_general_ci NOT NULL,
  PRIMARY KEY (`id_utama`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=19 ;

Kolom id_utama adalah id dari nama kategori dan id_sub adalah id keturunan dari id_utama jika id_utama 1 dan id_sub 0 adalah id_utama maka keturunan keturunan dari id_utama tersebut maskukkan id_sub nya dengan sesuai id_utama dari kategori uyama. Kemudian sekarang Anda isi tabel tersebut dengan kode dibawah ini

INSERT INTO `combo_box_kategori` (`id_utama`, `id_sub`, `nama`) VALUES
(1, 0, 'Musik'),
(2, 0, 'Olah Raga'),
(3, 0, 'Web Skrip'),
(4, 1, 'Pop'),
(5, 1, 'Rock'),
(6, 1, 'Dangdut'),
(7, 1, 'Blues'),
(8, 1, 'Jazz'),
(9, 2, 'Sepak Bola'),
(10, 2, 'Basket Ball'),
(11, 2, 'Tenis'),
(12, 2, 'Badminton'),
(13, 2, 'Volley'),
(14, 3, 'php'),
(15, 3, 'html'),
(16, 3, 'css'),
(17, 3, 'jquery'),
(18, 3, 'framework');

Sekarang kita pasang jquerynya untuk memproses pengambilan data kategori turunan dari kategori utama yang dipilih.

var xmlhttp = createRequestObject();
function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

function DinamisKategori(combobox)
{
    var kode = combobox.value;
    if (!kode) return;
    $("#load").show();
    $("#load").fadeIn(400).html('<img src="http://demo.infobelajar.com/komentar_jquery/images/loading.gif" align="absmiddle">');
    xmlhttp.open('get', 'subkategori.php?kode='+kode, true);
    xmlhttp.onreadystatechange = function() {
        if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
        {
             document.getElementById("subkategori").innerHTML = xmlhttp.responseText;
             $("#load").hide();
        }
        return false;
    }
    xmlhttp.send(null);
}

Kode skrip diatas untuk memproses pengambilan data dari file subkategori.php kemudian akan menampilkan pilihan turunan dari kategori utama tersebut.
subkategori.php nya bisa Anda Anda tulis seperti skrip dibawah ini.

<?php
require_once 'koneksi.php';
if(isset($_GET['kode'])){
    $kode = $_GET['kode'];
}
echo '<script language="JavaScript" src="combo-kategori-infobelajar.js"></script>';

echo '<select name="subkategori"  class="cmb">';
echo '<option>- Pilih Kategori Turunan -</option>';
$query = "SELECT id_utama, id_sub, nama from combo_box_kategori WHERE id_sub='$kode' ORDER BY nama ASC";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result))
    {
        echo '<option value="'.$row['0'].'">'.$row['2'].'</option>';
    }
echo '</select><span id="load"></span>';
?>

Dan terakhir Anda buat tampilan kategori utamanya dengan skrip kode di bawah ini.

<div>
  Kategori Utama:
    <div>
      <select name='kategori' onChange='DinamisKategori(this);' class='cmb'>
          <option value="" selected="true">- Pilih Kategori Utama -</option>
          <?php
           $query = "select id_utama, nama from combo_box_kategori WHERE id_sub = 0 ORDER BY nama ASC";
           $result = mysql_query($query);
             while ($rotasi=mysql_fetch_array($result)){
                extract($rotasi);
                echo '<option value="'.$rotasi['0'].'">'.$rotasi['1'].'</option>';
             }
           ?>
       </select>
   </div>
</div>
<br />
<div>
 Kategori Turunan:
   <div id='subkategori'>
     <select name='subkategori' class="cmb" disabled="true">
       <option>- Pilih Kategori Turunan -</option>
     </select><span id="load"></span>
   </div>
</div>

Demikan yang saya share kali ini semoga dapat bermanfaan untuk Anda.