Membuat Dropdown List Bertingkat dengan jQuery-AJAX

Membuat Dropdown List Bertingkat dengan jQuery-AJAX

Tutorial Information

ProgramPHP/jQuery/AJAX
Version1.0
DifficultyPemula
Estimated Time30 Menit

Diantara jenis antarmuka form HTML kita pasti pernah mengenal apa itu dropdown list. Atau jika belum kenal istilah dropdown list, mungkin suatu kali Anda pernah…

Diantara jenis antarmuka form HTML kita pasti pernah mengenal apa itu dropdown list. Atau jika belum kenal istilah dropdown list, mungkin suatu kali Anda pernah mendapati sebuah form pendaftaran online yang berupa daftar pilihan yang sudah ditentukan. Dengan kata lain, suatu dropdown list ketika di klik akan menampilkan beberapa pilihan yang harus dipilih oleh user.

Lalu apa itu dropdown list bertingkat? Dropdown list bertingkat dapat diibaratkan sebagai beberapa dropdown list yang saling berhubungan. Ketika Anda memilih salah satu pilihan pada dropdown list yang levelnya lebih tinggi, maka isi dropdown list yang levelnya lebih rendah akan mengikuti sesuai dengan pilihan dropdown list di atasnya. Sebagai contoh ketika Anda memilih alamat yang terdiri dari daftar pilihan negara, provinsi, dan kabupaten.Berikut adalah salah satu contoh dropdown list bertingkat.

dropdown

Secara default, HTML tidak mendukung pembuatan form untuk dropdown list bertingkat. Untuk mengakalinya, kita dapat memanfaatkan script, salah satunya dengan menggunakan script jQuery&Ajax. Untuk lebih jelasnya, mari kita ikuti tutorialberikut untuk membuat dropdown list bertingkat. Tutorial kali ini akan mengambil contoh kasus pembuatan dropdownlist bertingkat untuk memilih negara, provinsi, dan kabupaten.

Menyiapkan database

Database yang digunakan pada tutorial kali ini adalah MySQL. Nama database pada tutorial kali ini adalah ‘alamat’. Database terdiri dari tiga tabel, yaitu tabel ‘negara’, ‘provinsi’, dan ‘kota’. Jika diperhatikan pada script query SQL berikut, engine database yang digunakan adalah InnoDB. Agar ketiga tabel tersebut dapat saling terhubung, maka perlu dibuat primary key. Dalam hal ini, tabel yang mempunyai level tertinggi adalah negara, sehingga tabel ‘negara’ akan berhubungan dengan tabel ‘provinsi’. Sedangkan tabel ‘provinsi’ akan berhubungan dengan tabel ‘kota’.

-- Membuat struktur tabel `kota`
CREATE TABLE IF NOT EXISTS `kota` (
  `idKota` int(5) NOT NULL,
  `namaKota` varchar(30) NOT NULL,
  `idProvinsi` int(5) NOT NULL,
  PRIMARY KEY (`idKota`),
  KEY `idProvinsi` (`idProvinsi`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Membuat struktur tabel `provinsi`
CREATE TABLE IF NOT EXISTS `provinsi` (
  `idProvinsi` int(5) NOT NULL,
  `namaProvinsi` varchar(30) NOT NULL,
  `idNegara` int(5) NOT NULL,
  PRIMARY KEY (`idProvinsi`),
  KEY `idNegara` (`idNegara`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Membuat struktur tabel `negara`
CREATE TABLE IF NOT EXISTS `negara` (
  `idNegara` int(5) NOT NULL,
  `namaNegara` varchar(30) NOT NULL,
  PRIMARY KEY (`idNegara`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Agar tabel tersebut dapat dimanfaatkan untuk uji coba, maka kita harus memasukkan data dummy ke dalam tabel tersebut. Berikut adalah script untk memasukkan data dummy untuk tiap-tiap tabel.

-- Memasukkan data dummy untuk tabel `negara`
INSERT INTO `negara` (`idNegara`, `namaNegara`) VALUES
(1, 'Indonesia'),
(2, 'Australia');

-- Memasukkan data dummy untuk tabel `provinsi`
INSERT INTO `provinsi` (`idProvinsi`, `namaProvinsi`, `idNegara`) VALUES
(1, 'Aceh', 1),
(2, 'Sumatera Utara', 1),
(3, 'Sumatera Barat', 1),
(4, 'Riau', 1),
(5, 'Jambi', 1);

-- Memasukkan data dummy untuk tabel `kota`
INSERT INTO `kota` (`idKota`, `namaKota`, `idProvinsi`) VALUES
(1, 'Kab. Aceh Barat', 1),
(2, 'Kab. Aceh Barat Daya', 1);

Setting koneksi ke database

Simpan script berikut ke dalam file db.php.

<?php

$hostname = "localhost"; /*nama server*/
$dbuser = "root"; /*nama username database*/
$dbpass = "12345abcde"; /*password database*/
$dbName = "alamat"; /*nama database*/

$koneksi = mysql_connect($hostname,$dbuser,$dbpass) or die ('Tidak bisa konek DB');
$konekDB = mysql_select_db($dbName,$koneksi) or die ('DB tidak ada');
?>

Membuat dropdown list Provinsi

Berikut ini adalah isi script getProvinsi.php. Pada dasarnya script ini berfungsi untuk memilih list provinsi yang bersesuaian dengan pilihan dropdown list negara. Query ditentukan berdasarkan ‘idNegara’.

<?php

ini_set('display_errors',0);
require_once "db.php";

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

if($idNegara == ''){
     exit;
}else{
     $sql = "
          SELECT
               idProvinsi,
               namaProvinsi
          FROM
               provinsi
          WHERE
               idNegara = '$idNegara'
          ORDER BY namaProvinsi
     ";
     $getNamaProvinsi = mysql_query($sql,$koneksi) or die ('Query Gagal');
     while($data = mysql_fetch_array($getNamaProvinsi)){
          echo '<option value="'.$data['idProvinsi'].'">'.$data['namaProvinsi'].'</option>';
     }
     exit;    
}
?>

Membuat Dropdown list kabupaten/kota

Berikut ini adalah isi script getKota.php. Pada dasarnya script ini berfungsi untuk memilih list kabupaten/kota yang bersesuaian dengan pilihan dropdown list provinsi. Query ditentukan berdasarkan ‘idProvinsi’.

<?php

ini_set('display_errors',0);
require_once "db.php";

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

if($idProvinsi == ''){
     exit;
}else{
     $sql = "
          SELECT
               idKota,
               namaKota
          FROM
               kota
          WHERE
               idProvinsi = '$idProvinsi'
          ORDER BY namaKota
     ";
     $getNamaKota = mysql_query($sql,$koneksi) or die ('Query Gagal');
     while($data = mysql_fetch_array($getNamaKota)){
          echo '<option value="'.$data['idKota'].'">'.$data['namaKota'].'</option>';
     }
     exit;    
}
?>

Membuat form HTML

Script berikut ini akan disimpan ke dalam file index.php. Pada script ini juga akan dimasukkan script Ajax yang berfungsi untuk mengontrol dropdown list bertingkat. Jangan lupa untuk mendownload dahulu script jQuery di sini, pilih versi yang paling baru, kemudian di-include-kan ke dalam script berikut.

<?php

require_once "db.php";

// ambil data 
$sql = "
SELECT
     idNegara,
     namaNegara
FROM
     negara
ORDER BY namaNegara
";
$getComboNegara = mysql_query($sql,$koneksi) or die ('Query Gagal');

?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<link rel="Shortcut Icon" href="favicon.ico" />
<title>Dropdown List Bertingkat dengan jQuery-AJAX</title>

<!—Include Script jQuery, sesuaikan nama versi jQuery yang digunakan pada bagian src -->
<script type="text/javascript" src="jquery17.min.js"></script>

<!-- Script Ajax untuk Mengontrol Dropdown List Bertingkat -->
<script type="text/javascript">
$(function() {
     $("#cmbNegara").change(function(){
          $("img#imgLoad").show();
          var idNegara = $(this).val();

          $.ajax({
             type: "POST",
             dataType: "html",
             url: "getProvinsi.php",
             data: "idNegara="+idNegara,
             success: function(msg){
                 if(msg == ''){
                         $("select#cmbProvinsi").html('<option value="">--Pilih Provinsi--</option>');
                         $("select#cmbKota").html('<option value="">--Pilih Kota--</option>');
                 }else{
                           $("select#cmbProvinsi").html(msg);                                                       
                 }
                 $("img#imgLoad").hide();

                 getAjaxAlamat();                                                        
             }
          });                    
     });

     $("#cmbProvinsi").change(getAjaxAlamat);
     function getAjaxAlamat(){
          $("img#imgLoadMerk").show();
          var idProvinsi = $("#cmbProvinsi").val();

          $.ajax({
             type: "POST",
             dataType: "html",
             url: "getKota.php",
             data: "idProvinsi="+idProvinsi,
             success: function(msg){
                 if(msg == ''){
                         $("select#cmbKota").html('<option value="">--Pilih Kota--</option>');                                                                                  
                 }else{
                           $("select#cmbKota").html(msg);                              
                 }
                 $("img#imgLoadMerk").hide();                                                        
             }
          });
     }     
});
</script>

</head>
<body>
<div id="container">
<h3>Dropdown List Bertingkat dengan jQuery-AJAX</h3>

<form>
<table width="500" border="0" id="tabelForm">
<tr>
<td width="120">Nama</td>
<td><input type="text" name="nama" id="nama" size="30"></input></td>
</tr>

<tr>
<td width="120">Negara</td>
<td>
<select name="cmbNegara" id="cmbNegara">
<option value="">--Pilih Negara--</option>
<?php
                                   while($data = mysql_fetch_array($getComboNegara)){
                                        echo '<option value="'.$data['idNegara'].'">'.$data['namaNegara'].'</option>';
                                   }
                              ?>
</select>
  <img src="loading.gif" width="18" id="imgLoad" style="display:none;" />
</td>
</tr>
<tr>
<td width="120">Provinsi</td>
<td>
<select name="cmbProvinsi" id="cmbProvinsi" width="300">
<option value="">--Pilih Provinsi--</option>
</select>
  <img src="loading.gif" width="18" id="imgLoadMerk" style="display:none;" />
</td>
</tr>
<tr>
<td width="120">Kota/Kabupaten</td>
<td>
<select name="cmbKota" id="cmbKota">
<option value="">--Pilih Kota--</option>
</select>
</td>
</tr>
</table>
</form>

</div>
</body>
</html>

Semua file di atas masukkan dalam satu folder, kemudian akseslah melalu web browser kesayangan Anda. Hasil akhir dari tutorial ini seharusnya tampak seperti gambar berikut:

Hasil dropdown

Hasil dropdown

Penutup

Melalui contoh tutorial ini penulis berharap dapat membantu para pembaca sekalian untuk mengembangkan dropdown list bertingkat secara lebih lanjut. Tentu akan ada banyak manfaat yang diperoleh dengan adanya bentuk antarmuka dropdown list bertingkat semacam ini. Dropdown list bertingkat ini dapat dikembangkan sesuai dengan kebutuhan dan tujuan tertentu. Akan tetapi, jangan lupa bahwa penggunaan antarmuka dropdown list ini hanya dapat digunakan ketika dalam suatu form, pilihan-pilihan isiantelah ditentukan terlebih dahulu dan user hanya diperbolehkan memilih salah satu pilihan. Selamat berkarya!

Tag: , , , ,

48 Comments

Leave Comment
  1. bagas says:

    bagaimana kalo ingin membuat lebih dari 2 tingkat?

  2. antok says:

    mantap gan…. maturnuwun..

  3. saddam says:

    gimana kalau buat 4 variabel seperti propinsi, kota, kecamatan, desa

  4. fauzaan says:

    kalau hasil dari dropdown terakhir misal nya kita pilih aceh barat (seperti gambar) terus otomatis membuka web nya aceh barat tersebut gimana

  5. alexkun says:

    download script jQuery kok tidak ada ya gan?

  6. adam says:

    saya masih bingung dengan menambahkan script jqurey pada bagian akhirnya

    maksudnya bagaimana ya?

  7. rahmat says:

    maaf mas, di halaman jquery ny versi dan file js apa yg harus di download , Thanks :-)

  8. Abu Lailana says:

    Wah mantap pak tutorialnya. Ijin copas ya. Hasilnya not so bad lah… Tinggal utak-atik sendiri Insya Allah bisa jalan. Yang penting filosofinya sdh tahu. Boleh mau lihat contohnya : (link removed)

  9. sinux3r says:

    Suwun banget gan… ini yang tak cari..

  10. putarotak says:

    mas tutorialnya bagus, saya mau tanya kok pengiriman idNegara ke getProvinsi.php ya ?

    pas saya buka getProvinsi.php nya ada eror idNegara undefinied. itu kenapa ya mas ?

    • Aditya Rizki says:

      kalo “undefined” ada kemungkinan database Anda bermasalah. Coba pastikan file PHP dan database yang dimaksud sudah terkoneksi dengan benar, kemudian jangan lupa untuk mengisi database tersebut sesuai contoh di atas. :)

  11. punya database kabupaten kotanya gak mas broo ?

  12. Mantap gan, nompang kopas ya, bukan untuk di posting hanya untuk bahan pembelajaran saja untuk forum kami..makasih banyak ya..salam kenal

  13. Abu Irfan says:

    Buat admin, saya ucapkan terima kasih buanyakkkk. Artikel ini sangat2 membantu saya dalam menyusun toko online saya. Cuma memang saya saat ini sdg utak-atik spya pas muncul kecamatan muncul juga tarif / ongkir nya. Tapi secara umum penjelasan mas admin mudah dicerna, shg bisa diaplikasikan tanpa ada error sedikitpun. Buat mas adit, trus rajin nulis krn sangat bermanfaat buat banyak orang.

  14. Leo Waldi says:

    gan udah ane coba, kok tampilan provinsi sama kotanya gak muncul pas kita klik negaranya…
    mohon pencerahannya…

  15. tom says:

    bagaimana kalau hasil yang di selek list ditampilkan dalam uraian tabel, No – Provinsi – Kota ?

  16. lutfi says:

    gan, ane bingung donwload jquerynya yang mana, yang di link ente gak bisa di download, malah ke postingan ini, trus ane coba donwload sembarang jquery, ane masukin, pilihan yang muncul cuma pilh negara aja, bawanya gak muncul gan, itu kenapa ya?
    help plis, thx b4

  17. ratna says:

    saya juga gak muncul pilhan provinsi sama kota nya
    bagaimana y??

  18. detta says:

    jquery yang di download yang bagian mana ya?

  19. bimo says:

    mas bro
    kalo misalkan kasusnya pilih tahun, lalu pilih semester
    setelah itu menampilkan mahasiswa aktif
    jadi ada dua syarat tahun dan semester gimana caranya?

  20. Bian says:

    Gan, itu contoh script ane bingung..
    Mana script Ajaxnya gan? koq tahu2 nongol misal $_POST[idNegara], padahal ga ada di contoh tentang bagaimana Option negara dibuat sehingga menjadi value pada $_POST[idNegara],
    kalo pake $_POST kan harus ada script …. kan?

  21. iman moh abdurahman says:

    Maf newbie
    mo nanya gan,,,
    Klo kotanya pake type text gmna gan,jangan pake select option agi..
    terimaksih gan,,,mohon pencerahanya..

  22. Idin says:

    Wah, kalau saya sudah download jquery terbary 2.3, database sudah dibuat sesuai arahan diatas, koneksi sudah dipastikan tersambung, klo tidak konek pasti error.

    Tapi dropdown tidak narik data, semuanya mulai dari negara sampai dengan kota. Alias sama sekali nda jalan mas brow. Klo bisa tolong scriptnya di upload biar bisa kami download.

    Terima kasih,

  23. Mantap.. Ijin copas source code nya ya min…

  24. Alat Bantu says:

    terima kasih gan
    ane cari baru di sini yang lengkap

  25. Herfian says:

    Gan… kalau mau menampilkan datanya sesuai dengan combobox tsb, bagaimana scriptnya?

  26. agus salahudin says:

    terima kasih pelajarannya

  27. maswes says:

    kebetulan lagi cari skrip multiple drop down select buat kategori produk..mantapp.. trims

  28. MH says:

    Asslamu alikum , Saya uda cobe
    Negara
    Provinsi
    Kota
    Kcl

    ini Kcl selakasi tidk bisa stick , bisa bantu ?

    $(function() {
    $(“#cmbNegara”).change(function(){
    $(“img#imgLoad”).show();
    var idNegara = $(this).val();

    $.ajax({
    type: “POST”,
    dataType: “html”,
    url: “getProvinsi.php”,
    data: “idNegara=”+idNegara,
    success: function(msg){
    if(msg == ”){
    $(“select#cmbProvinsi”).html(‘–Pilih Provinsi–‘);
    $(“select#cmbKota”).html(‘–Pilih Kota–‘);
    $(“select#cmbKcl”).html(‘–Pilih Kcl–‘);
    }else{
    $(“select#cmbProvinsi”).html(msg);
    }
    $(“img#imgLoad”).hide();

    getAjaxAlamat();
    }
    });
    })

    $(“#cmbProvinsi”).change(getAjaxAlamat);
    function getAjaxAlamat(){
    $(“img#imgLoadMerk”).show();
    var idProvinsi = $(“#cmbProvinsi”).val();

    $.ajax({
    type: “POST”,
    dataType: “html”,
    url: “getKota.php”,
    data: “idProvinsi=”+idProvinsi,
    success: function(msg){
    if(msg == ”){
    $(“select#cmbKota”).html(‘–Pilih Kota–‘);
    }else{
    $(“select#cmbKota”).html(msg);
    }
    $(“img#imgLoadMerk”).hide();
    getAjaxAlamat();
    }
    });

    $(“#cmb”).change(getAjaxAlamat);
    function getAjaxAlamat(){
    $(“img#imgLoadMerk”).show();
    var idKota = $(“#cmbKota”).val();

    $.ajax({
    type: “POST”,
    dataType: “html”,
    url: “getKcl.php”,
    data: “idKota=”+idKota,
    success: function(msg){
    if(msg == ”){
    $(“select#cmbKcl”).html(‘–Pilih Kcl–‘);
    }else{
    $(“select#cmbKcl”).html(msg);
    }
    $(“img#imgLoadMerk”).hide();
    getAjaxAlamat();
    }
    });
    }

    }
    });

    Negara

    –Pilih Negara–
    <?php
    while($data = mysql_fetch_array($getComboNegara)){
    echo '’.$data[‘namaNegara’].”;
    }
    ?>

    Provinsi

    –Pilih Provinsi–

    Kota

    –Pilih Kota–

    Kcl

    –Pilih Kcl–

  29. alhamdulilah nemu juga, makasi gan postnya membantu saya di website saya

  30. Dimas says:

    Syukur dapet ilmu di sini

  31. ridho prahara putra says:

    Pak..gimana kalo combobox negara itu dibikin checkbox?? Sya lagi bikin absensi kehadiran..di kasus saya, combobox negara itu daftar orang yang hadir..apa saya mengganti checkbox#blabla… di ajax-nya??
    Trimakasi…

  32. lumayan ini buat form pemesanan kaos..
    tapi lumayan bikinnya ya.

  33. Arya Maulana says:

    mas saya mau tanya ap sebetulnya fungsi expresi ini

    $(“img#imgLoad”).show();
    $(“img#imgLoad”).hide();

    $(“img#imgLoadMerk”).show();
    $(“img#imgLoadMerk”).hide();

  34. kusyadi says:

    terima kasih atas ilmunya. saya ada masalah nih gan. kalau sudah isi nama pilh negara pilih propinsi terus pilih kota/kab dan saya mau simpan data (saya sudah sediakan tombol simpan) kemudian halaman reload / refresh. karena yang berubah hanya nama dan kab/kota maka saya isi nama dan langsung pilih kab/kota. tetapi yang tampil adalah semua kab/kota tidak terpengaruh lagi dengan negara dan propinsi yang dilipilih. jadi harus ulang lagi pilih negara dan pilih propinsi. bisa tidak ya combobox nya berisi list yang dilipih tetap sesuai dengan pilihan sebelum di simpan / reload. terima kasih

Write Comment

Your email will not be published. The marked label is required.