Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten

Cukup banyak pengunjung situs Achmatim.Net yang bertanya seputar manipulasi ComboBox secara dinamis. Yang dimaksud dinamis di sini, selain data diambil dari database, juga terkait dengan isi dari Combobox yang menyesuaikan pada kondisi tertentu. Hal itulah yang melatarbelakangi saya menulis tutorial ini, walaupun jika mau sedikit berusaha, tutorial di Google terkait hal tersebut sudah cukup banyak.

Pada tutorial kali ini, kita akan mengambil studi kasus berupa data inputan Propinsi dan Kabupaten/Kota di Indonesia. Jika kita menggunakan jenis inputan combobox, tentunya kita akan menampilkan semua data Propinsi dan Kabupaten/Kota dalam dua combobox yang berbeda. Tentunya hal tersebut tidak efektif karena ada ratusan kabupaten yang ada di seluruh propinsi di Indonesia. Selain itu, rentan juga terhadap kesalahan input, misalnya pada inputan Propinsi diisi “DKI Jakarta”, tapi di inputan Kabupaten diisi dengan kabupaten “Banyumas” yang tidak terletak di propinsi DKI Jakarta.

ajax-combobox-3

Solusi yang akan disampaikan di tutorial ini adalah dengan membuat kedua combobox Propinsi dan Kabupaten saling terkait. Saat dipilih Propinsi tertentu, maka pada combobox Kabupaten akan otomatis berisi nama-nama kabupaten/kota sesuai dengan propinsi yang dipilih tersebut. tutorial ini akan menggunakan konsep Ajax dengan library JQuery. Misalnya jika dipilih propinsi DKI Jakarta, maka otomatis combobox kabupaten hanya berisi Jakarta Selatan, Jakarta Utara, Jakarta Barat, Jakarta Timur, Jakarta Pusat dan Kepulauan Seribu.

Data Propinsi & Kabupaten

Seperti sudah dinyatakan di atas, kita akan menggunakan contoh kasus data propinsi dan kabupaten/kota di Indonesia. Untuk menyederhanakan kasus, hanya field kode dan nama saja yang akan dibuat. Berikut ini class diagram (struktur data) penyimpanan data propinsi dan kabupaten:

class-diagram
Struktur database Propinsi-Kabupaten

Buatlah dua buah tabel di atas di MySQL dengan menggunakan MySQL Client favorit Anda. Setelah itu, isilah data kedua tabel tersebut. Tapi daripada repot, silahkan download file SQL dari kedua tabel tersebut, lengkap dengan isi datanya, lalu import dengan PHPMyAdmin, MySQL Front atau mysql client lainnya. Catatan: file SQL juga sudah dilengkapi dengan perintah membuat database (nama db: demo), jadi tidak perlu bikin database dulu sebelum import.

Menampilkan Data di Combobox dengan PHP

Untuk menampilkan data dari database ke combobox, pada dasarnya sama seperti menampilkan data seperti biasanya. Proses menampilkan data ke combobox dapat dilihat pada program 1 berikut ini. Pertama-tama kita lakukan koneksi ke database mysql, kali ini kita menggunakan fungsi mysqli_* yang merupakan pengembangan dari fungsi mysql_*. Konon fungsi ini performanya lebih baik dibanding fungsi mysql_*, dan juga dapat ditulis dengan gaya prosedural maupun object-oriented. Untuk lebih mempermudah, pada contoh-contoh program di bawah ini, kita akan gunakan gaya prosedural.

Perhatikan baris ke-3 program 1 di bawah ini. Untuk melakukan koneksi ke mysql menggunakan fungsi mysqli_connect() yang memiliki 6 (enam) parameter terkait dengan server MySQL yaitu hostname, username, password, nama database, port dan socket. Pada model object-oriented, fungsi ini merupakan alias dari mysqli::__construct(). Setelah melakukan koneksi, selanjutnya pada baris 6-12 dilakukan pengambilan data propinsi dari tabel propinsi dan ditampung dalam variabel array $arrpropinsi. Kita menggunakan fungsi mysqli_query() untuk meng-eksekusi perintah query dan fungsi mysqli_fetch_assoc() untuk mengambil hasil perintah query-nya.

Perhatikan baris baris 28-23. Pada baris tersebut, dibuat object combobox dengan tag <select> dengan atribut name “propinsi” dan id juga “propinsi”. Dan untuk menampilkan data propinsi di combobox, kita gunakan bentuk perulangan foreach() dengan parameter variabel $arrpropinsi yang berisi data propinsi. Sementara itu, untuk combobox data kabupaten/kota kita cukup membuat object <select>-nya saja (baris ke-39). Untuk datanya akan di-generate saat opsi di combobox propinsi dipilih nantinya.

  1. <?php
  2. #koneksi
  3. $conn = mysqli_connect("localhost", "root", "qwerty", "demo");
  4. #akhir-koneksi
  5.  
  6. #ambil data propinsi
  7. $query = "SELECT kode, nama FROM propinsi ORDER BY nama";
  8. $sql = mysqli_query($conn, $query);
  9. $arrpropinsi = array();
  10. while ($row = mysqli_fetch_assoc($sql)) {
  11. $arrpropinsi [ $row['kode'] ] = $row['nama'];
  12. }
  13.  
  14. ?>
  15. <html>
  16. <head>
  17. <title>Manipulasi Combobox dengan Ajax-JQuery</title>
  18. <style type="text/css">
  19. span.inputan { display:block; margin-bottom:5px; }
  20. span.inputan label { float:left; display:block; width:200px;}
  21. </style>
  22. </head>
  23. <body>
  24. <h1>Contoh Manipulasi Combobox dengan Ajax-JQuery</h1>
  25. <form action="" method="post">
  26. <span class="inputan">
  27. <label for="propinsi">Propinsi</label>
  28. : <select id="propinsi" name="propinsi">
  29. <option value="">-Pilih-</option>
  30. <?php
  31. foreach ($arrpropinsi as $kode=>$nama) {
  32. echo "<option value='$kode'>$nama</option>";
  33. }
  34. ?>
  35. </select>
  36. </span>
  37. <span class="inputan">
  38. <label for="kabupaten">Kabupaten</label>
  39. : <select id="kabupaten" name="kabupaten">
  40. </select>
  41. </span>
  42. </form>
  43. </body>
  44. </html>

Jika program 1 di atas dicoba maka tampilannya kurang lebih sebagai berikut.

Tampilan Combobox
Tampilan Combobox

Isi Combobox Kabupaten berdasarkan Propinsi yang Dipilih

Sesuai dengan tujuan utama dari tutorial ini, sekarang kita akan mengisi combobox kabupaten berdasarkan opsi combobox propinsi yang dipilih. Jadi data kabupaten/kota yang akan muncul di combobox kedua selalu sesuai dengan propinsi yang dipilih. Dan sesuai dengan judul tutorial ini, kita akan menggunakan konsep AJAX dengan library JQuery.

Perhatikan Contoh Program ke-2 berikut ini!

  1. <?php
  2. #koneksi
  3. $conn = mysqli_connect("localhost", "root", "qwerty", "demo");
  4. #akhir-koneksi
  5.  
  6. #ambil data propinsi
  7. $query = "SELECT kode, nama FROM propinsi ORDER BY nama";
  8. $sql = mysqli_query($conn, $query);
  9. $arrpropinsi = array();
  10. while ($row = mysqli_fetch_assoc($sql)) {
  11. $arrpropinsi [ $row['kode'] ] = $row['nama'];
  12. }
  13.  
  14. #action get Kabupaten
  15. if(isset($_GET['action']) && $_GET['action'] == "getKab") {
  16. $kode_prop = $_GET['kode_prop'];
  17.  
  18. //ambil data kabupaten
  19. $query = "SELECT kode, nama FROM kabupaten WHERE kode_prop='$kode_prop' ORDER BY nama";
  20. $sql = mysqli_query($conn, $query);
  21. $arrkab = array();
  22. while ($row = mysqli_fetch_assoc($sql)) {
  23. array_push($arrkab, $row);
  24. }
  25. echo json_encode($arrkab);
  26. }
  27. ?>
  28. <html>
  29. <head>
  30. <title>Manipulasi Combobox dengan Ajax-JQuery</title>
  31. <style type="text/css">
  32. span.inputan { display:block; margin-bottom:5px; }
  33. span.inputan label { float:left; display:block; width:200px;}
  34. </style>
  35. <script type="text/javascript" src="libs/jquery.min.js"></script>
  36. <script type="text/javascript">
  37. $(document).ready(function(){
  38. $('#propinsi').change(function(){
  39. $.getJSON('index.php',{action:'getKab', kode_prop:$(this).val()}, function(json){
  40. $('#kabupaten').html('');
  41. $.each(json, function(index, row) {
  42. $('#kabupaten').append('<option value='+row.kode+'>'+row.nama+'</option>');
  43. });
  44. });
  45. });
  46. });
  47. </script>
  48. </head>
  49. <body>
  50. <h1>Contoh Manipulasi Combobox dengan Ajax-JQuery</h1>
  51. <form action="" method="post">
  52. <span class="inputan">
  53. <label for="propinsi">Propinsi</label>
  54. : <select id="propinsi" name="propinsi">
  55. <option value="">-Pilih-</option>
  56. <?php
  57. foreach ($arrpropinsi as $kode=>$nama) {
  58. echo "<option value='$kode'>$nama</option>";
  59. }
  60. ?>
  61. </select>
  62. </span>
  63. <span class="inputan">
  64. <label for="kabupaten">Kabupaten</label>
  65. : <select id="kabupaten" name="kabupaten">
  66. </select>
  67. </span>
  68. </form>
  69. </body>
  70. </html>

Library JQuery harus disertakan terlebih dahulu sebelum kita dapat memanipulasi combobox dengan JQuery. Untuk menyertakan library JQuery, kita dapat mengunduhnya dari situs http://jquery.com lalu sertakan seperti pada baris ke-36. Selain itu, kita juga dapat menggunakan online CDN dengan mengarahkan atribut src pada baris ke-36 ke alamat http://code.jquery.com/jquery.min.js, tanpa harus mengunduhnya ke komputer kita.

Selanjutnya perhatikan baris 37-48. Untuk mengatur opsi pada combobox kabupaten berdasarkan nilai yang dipilih pada combobox propinsi, kita tentukan event-nya, yaitu change(). Dengan selector #propinsi kita panggil event change() seperti terlihat pada baris ke-39. Dengan demikian, ketika isi / nilai dari combobox propinsi berubah (change) maka fungsi akan dijalankan. Pada baris ke-40 kita menggunakan fungsi $.getJSON untuk memanggil file “index.php” dengan mengirimkan parameter “action” yang berisi “getKab” dan “kode_prop” yang diisi dengan kode propinsi terpilih ($(this).val()).

Setelah fungsi $.getJSON memanggil file index.php, program akan beralih ke baris 15-27 dimana pada baris tersebut “ditangkap” nilai parameter “kode_prop” dengan menggunakan predefined variabel $_GET. Dan selanjutnya dilakukan query ke database, data kabupaten sesuai dengan kode_prop tersebut. Data dimasukkan ke dalam variabel array $arrkab dan diubah ke dalam format JSON dengan fungsi json_encode() seperti terlihat pada baris ke-25.

Nilai dari JSON akan ditangkap kembali oleh JQuery pada baris ke 40-45. Nilai dari combobox kabupaten dikosongkan dengan perintah $(‘#kabupaten’).html(”). Fungsi $.each() pada baris ke-42 akan melakukan perulangan untuk setiap nilai dari variabel json ditambahkan opsi (dengan fungsi append) ke dalam object combobox $(‘#kabupaten’). Dengan demikian, isi combobox selalu berubah sesuai dengan data yang dipilih pada combobox propinsi.

Berikut ini screenshot hasil akhir dari program 2 di atas.

Tampilan Data di Combobox
Tampilan Data di Combobox

Kesimpulan

Secara sederhana, tutorial ini memberikan gambaran bagaimana memanipulasi combobox dengan menggunakan konsep Ajax dan library JQuery, tentu dengan bahasa pemrograman PHP. Contoh di atas menggunakan kasus sederhana propinsi dan kabupaten, namun pada dasarnya dapat dikembangkan dan diterapkan untuk contoh kasus yang lainnya.

Download Tutorial dan Contoh Program

Download tutorial dan contoh program di link berikut ini.

Semoga tutorial ini bermanfaat untuk kita semua dan berbagilah hal baik ke sebanyak-banyaknya orang maka kebahagiaan akan menghampiri Anda. Satu Karya untuk Indonesia!

Achmad Solichin
Twitter: @achmatim

Berbagi itu indah...Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0Digg this

54 comments

  1. biar kate ude banyak nyang bahas soal beginian.. tapi kalo pak dosen nyang nerangin, terasa lebih terang, gampang masuk ke otak oke… thank you master

  2. Trims pak, sangat membantu… bisa dilanjutkan menampilkan data kecamatan (dalam tabel) dari kabupaten tersebut, klo bs menggunakan dreamweaver pak, caranya gmn. maap pak sya cma bisa menggunakan dreamweaver klo scripting masih bingung…

  3. Terimakasih pa, kebetulan saya dapat tugas dari kantor & berhubungan dengan php & kebetulan juga sy sudah lupa 🙁 soalnya udah lama ga pernah pake php

  4. Pak mau tanya? Kondisi tabel Hobi : ID_HOBI, KET_HOBI
    Nah kan kalau mau menampilkan dicombobox isi dari tabel Hobi dengan memakai While, yg ingin saya tanyakan bagaimana Apabila pada pilihan dicombobox trsb yg ditampilkan ID dan apabila ID dipilih langsung muncul keterangan disampingnya atau dibawahnya tanpa perlu tombol submit ?
    Terimakasih pak 🙂

      1. Nah itu dia masalahnya pak, bingung nih pak kalau di web [msih baru], kebiasaan pake delphi jd kalau event tinggal double click keluardah prosedurenya hehe.

        Mungkin ada jawaban atau saran dari bapak tentang referensi atau keyword pak, agar saya bisa googling 🙂

        terimakasih 🙂

  5. bos ane coba scripnya ada from eror gini.kira2 apa yang salah ya? terima kasih mohon pencerahan.Warning: mysqli_fetch_assoc() expects parameter 1 to be mysqli_result, boolean given in C:AppServwwwajax-jakartaindex1.php on line 10

  6. hehe iya pak, ini lg ada garapan web, ya biasanya cm PHP & MYSQL aja, tp ini ada AJAX JQuerynya dan saya blm mengerti betul AJAX jQuery.
    oke makasih pak 🙂

  7. pak kalo misalnya datanya di ambil dari tabel mysql(misal: tabel kategori) untuk ngisi combobox , trus pas proses “edit” memanggil pilihan yang sudah di simpan di tabel lain(misal: tabel berita) agar selected di pilihannya trus pilihan yang lainnya menampilkan data yang belum dipilih dari tabel(misal: kategori) itu bagaimana pak ?
    saya membuatnya pas selected selalu dobel datanya dan pilihan data dri tabel kategori lainnya tidak tampil ..
    mohon pencerahannya pak .. terima kasih …

    1. combobox dikosongin dulu sebelum diisi kembali agar tidak dobel. pake jquery untuk ngosongin misalnya $(‘#combo’).html(”); jika masih kesulitan silahkan share ke email

  8. Assalamualaikum pak
    mohon bantuannya donk pak. yang lanjutannya ke kecamatan. saya sudah coba otak atik tapi tetap gak bisa juga. untuk skripsi saya pak. mohon ya pak bantuannya
    Wassalam

  9. maaf pak, mau tanya, bagaimana kalau ingin di tampilkannya di textbox…
    misal klik pilihan yang ada di combobox
    trus otomatis keluar di textbox, saya otak-atik punya sampean gak bisa2, cari2 di internet gak nemu2, mohon bantuannya pak,

  10. Ini yang saya cari, Pak Guru 🙂
    Terima kasih banyak
    Saya sudah googling tapi mungkin karena belum tepat arahnya nyasar kemana2 ga ketemu
    Semoga menjadi amal jariah untuk bekal di akhirat kelak, Aamiin
    Maju Indonesiaku !!!

  11. Pak, kalo dalam satu page.php yang sama ada 2 macam yang seperti ini apa tetap berlaku?
    Saya buat 2 combo box cuma hanya 1 yang berhasil, combo yang kedua tidak mau membaca
    Mis. yang pertama propinsi dan kabupaten berhasi;
    yang kedua kecamatan dan kelurahan, kelurahannya ga muncul pak, padahal sudah pilih kecamatannya
    Mohon info
    salam

  12. Pak setelah query ke database hasilnya kode propinsi/kabupaten kalo ingin hasilnya nama propinsi/kabupaten gimana ya pak? Terima Kasih

  13. mau tanya gan saya ada masalah untuk menampilkan data siswa
    misalnya di kombobox kita buat pilihan kelas ketika kita pilih kelas X maka akan tampil siswa yang ada di kelas X tersebut….gimana caranya gan???

  14. kalau untuk menmpilkan data siswa gimana gan
    misalnya di combobox kita pilih kelas X maka akan tampil semua siswa yang kelas X tersebut….gimana caranya gan>??

  15. pak, gmn caranya kita mmbuat tmbol yg pada saat kita pilih otomatis yg kluar d stu sbuah kode seperti, aceh (o1),
    atau jakarata (02) .
    gmn cara data basenya
    terima kasih 🙂

  16. assalamualaikum pak.
    jika kita ingin mendapatkan nama yang dipilih dari combobox gmn pak, karena value selectnya adalah id_prop.
    mohon pencerahannya.
    trimaksih.

  17. assalamualaikum pak.
    saya kesulitan mengambil nama yang dipilih di combobox, setiap disubmit selalu keluar nama yang sama pak.
    mohon pencerahannya.
    trimakasih.

  18. assalamualaikum pak, sy coba tambahkan 1 combobox lagi untuk kecamatan, saat kita pilih propinsi maka akan muncul kabpaten yang pertama atau default menurut id kabupaten yang dipilih, pertanyaan saya bagaimana jika propinsi dipilih kemudian muncul kabupaten dan muncul kecamatan juga.
    mohon pencerahannya.
    trimakasih.

  19. Terimakasih pak Achmad tutorial sangat bermanfaat.
    ada satu kendala pak dari saya. kenapa data tidak tampil pada combobox yg kedua? saya cek di ‘Firebug’ ternyata data yg terkirim masih dalam bentuk JSON.
    apa ada yg salah dari script saya?
    ===================
    script js
    ===================
    $(‘#brandPrinter’).change(function(){
    $.getJSON(‘form.php’,{action:’getType’,id_Printer:$(this).val()},function(json){
    $(‘#typePrinter’).html(”);
    $.each(json, function(index, row){
    var optionValue = $(”+row.typePrinter+”);
    $(‘#typePrinter’).append(optionValue);
    });//end $.each()
    });//end $.getJSON
    });//end change();
    });

  20. gan ane mau tanya… itu kan buat nya pake 2 combobox . nah xl semisal g pake 2 combobox, tapi cuman 1 combobox dan 1 textbox gimana gan?

  21. pak saya mau tanya, kalo sebelum kita memilih combobox dinamisx kita ingin muncul kan kata “pilih” dulu, sy udh pakai 3 combobox urutannya kecamatan, desa, tps, saat kita pilih kecamatan memang muncul desa yang ada di kecamatan tersebut tapi tidak langsung muncul tps yg ada di desa tsb.mohon pencerahannya pak.
    trimaksih.

  22. Asslkm Pak Achmad sy ada sedikit pertanyaan dengan tutorial di atas. Jika combo box ke dua diganti dengan check box, coding nya seperti apa ya pak? Misalkan sy pilih dari combo box provinsi : DKI Jakarta, maka yg tampil adalah array data dalam bentuk checkbox. Sy ada studi kasus pemesanan tiket pak. Dimohon pencerahannnya. Terima kasih

  23. Mohon pencerahannya untuk sudi kasus 3 combo box dengan 2 combobox berhubungan pada 1 combobox.

    combo 1 = departemen isinya : paud, kursus, bimbel
    combo 2 = kelas
    paud kelasnya : kelas a, kelas b
    kursus kelasnya : level 1, level 2 , level 3
    bimbel kelasnya : kelas 1, kelas 2, kelas 3, …. kelas 6

    combo 3 = pelajaran
    paud pelajarannya : menggambar, berhitung, menulis ..dll
    kursus pelajarannya : bahasa inggris, menjahit, dll
    bimbel pelajarannya : mtk, bhs.indonesia, ipa, ips

    bagaimana caranya pada saat departemen di pilih maka combo kelas dan combo pelajaran tampil otomatis berdasarkan departemen. Terima Kasih.

  24. Terimakasih Mas, sangat membantu pekerjaan saya di kantor.
    Semoga rejekinya mas Achmad Solichin makin sukses dan diberi banyak kemudahan…

  25. sangat bermanfaat pak, kalo boleh saya minta pencerahannya pak, saya sudah menyelesaikan tutorial ini dan dibagian bawahnya saya mau tambahkan texfield otomatis berupa biaya pengiriman sesuai kota yang kita pilih di combobox tersebut. kira” bagaimana codingnya pak?

  26. pak kalo untuk kasus diatas dihubungkan dengan login session gimana ya pak ? misal user kota (semarang) pas login berarti masuk ke menu semarang, kalo user kota (pemalang) maka masuknya ke menu pemalang. sedangkakan kalo login dengan status provinsi (jateng) maka bisa masuk ke menu semarang dan pemalang.
    mohon bantuannya pak. terima kasih pak.

  27. pak, mohon bantuannya.saya lgi kebingungan buat combobox, skripsiku membutuhkan combobox dengan model kategori , ini untuk program hitung pendapatan MCU perusahaan pak,
    keinginan :
    pilih perusahaan > tampil paket (sudah bisa), pilih paket > muncul harga (sudah bisa) > input jumlah> tampil subtotal
    sampai situ sudah bisa pak tapi keinginannya ketika sekali pilih perusahaan dan melanjut ke tahahap pilih pket dst ketika di submit perusahaan tanpa memilih lagi..yg ada sekarang setelah di submit selalu harus milih perusahaan ulang padahal kondisinya satu perusahaan punya banyak paket pemeriksaan. itu bagaimana ya pak?

  28. Makasih buat tutorialx pak,,,
    tp saya mau nanya gimana klw qt mau membuat combobox bertingkat seperti diatas lebih dari satu. misalx
    saya mau nginput historik tempat tinggal seseorang dimana dlm provinsi dan kabupaten yg berbeda sebelumx dalam satu form ??

    Nama : Mr. X
    Provinsi tinggal 1 : Jakarta
    Kab. tinggal 1 : Jakarta Selatan

    Povinsi tinggal 2 : DI Yogyakarta
    kab. tinggal 2 : Sleman

    Submit

  29. saya mau tanya bagaimana jika saya ingin menampilkan data siswa. jika dipilih kelas pada combobox maka data siswa keluar dalam bentuk tabel. saya sudah cari di internet tidak ketemu
    makasih

  30. Totorialnya sangat membantu pak, tapi bisa tidak ya dipadukan dengan multiple select, misal saya mau menampilkan data,
    Propinsi pilih : “DKI Jakarta”
    Kabupaten pilih : “Jakarta Barat” , “Jakarta Timur” atau semua kabupaten dipilih.

    Mohon dibantu ya pak..

      1. Mohon koreksi Script berikut jika ada ya salah ya pak.

        Manipulasi Combobox dengan Ajax-JQuery

        span.inputan { display:block; margin-bottom:5px; }
        span.inputan label { float:left; display:block; width:200px;}

        $(document).ready(function(){
        $(“#kabupaten”).multipleSelect({
        placeholder: “Pilih”,
        filter:true
        });
        });

        $(document).ready(function(){
        $(‘#propinsi’).change(function(){
        $.getJSON(‘index.php’,{action:’getKab’, kode_prop:$(this).val()}, function(json){
        $(‘#kabupaten’).html(”);
        $.each(json, function(index, row) {
        $(‘#kabupaten’).append(”+row.nama+”);
        });
        });
        });
        });

        Manipulasi Combobox dengan Ajax-JQuery

        Propinsi
        :
        -Pilih-
        $nama) {
        echo “$nama”;
        }
        ?>

        Kabupaten
        :

Leave a Reply

Your email address will not be published. Required fields are marked *