[PHP + MySQL + JQuery] Chained Combobox

Update 18 November 2018

Pada artikel ini kita akan belajar bagaimana mendapatkan data dari suatu pilihan di listbox atau combobox dan menampung data tersebut ke listbox lainnya (biasa disebut Chained Combobox) tanpa mereload page tsersebut dengan xmlhttprequest sehingga antara listbox atau combobox tersebut saling terhubung satu sama lainnya. Dengan xmlhttprequest, kita bisa merequest data, menerima data dari server tanpa mereload atau merefresh halaman, xmlhttprequest juga digunakan untuk mengirim data ke server melalui background tanpa proses submit.

Studi kasus atau contoh nyata paling umum adalah ketika kita membuat sebuah form, kemudian ada input untuk memilih Kecamatan dan Kelurahan. Nah, pilihan kelurahan akan tergantung atau tehrubung pada pilihan kecamatan yang dipilih. Untuk melakukan hal tersebut tanpa melakukan reload atau memilih secara manual, kita perlu menggunakan JQuery dan fungsi xmlhttprequest, sedangkan data yang diterima akan berupa JSON.


Pendahuluan
Siapkan atau buat tabel bernama tbl_kecamatan sebagai berikut :

dengan data sebagai berikut:

Siapkan atau buat tbl_kelurahan sebagai berikut:

dengan data seperti berikut :

Lumayan banyak datanya =))

Pertama
Setelah persiapan tabel selesai, buat file koneksi.php seperti biasa dengan coding sebagai berikut:
catatan: sesuaikan setting username,password dan nama database di local anda

<?php
   define('DB_SERVER', 'localhost');
   define('DB_USERNAME', 'root');
   define('DB_PASSWORD', '');
   define('DB_DATABASE', 'yudhatp_blog');
   $db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

Kedua
Buat file bernama inputan.php yang akan digunakan sebagai form input dengan coding sebagai berikut:

<?php
require_once "koneksi.php"
?>
<h2>Yudha's World</h2>
<div class="form-group row">
<div class="form-group col-md-2">
  <label>Kecamatan</label>
</div>
<div class="form-group col-md-4">
<select name="id_kecamatan" id="id_kecamatan" class="form-control" onChange="GetKelurahan(this.value)" required>
<option value="">Pilih</option>
<?php
$sql = "SELECT * FROM tbl_kecamatan ORDER BY nama_kecamatan ASC";
$data = mysqli_query($db,$sql);

while($camat = mysqli_fetch_array($data,MYSQLI_ASSOC)) {
echo "<option value='".$camat['id_kecamatan']."'".$value.">".str_replace("_"," ",$camat['nama_kecamatan'])."</option>";
}
?>
</select>
</div>
<div class="form-group col-md-2">
  <label>Kelurahan</label>
</div>
<div class="form-group col-md-4">
  <select name="id_kelurahan" id="id_kelurahan" class="form-control" required>
<option value="">Pilih</option>
</select>
</div>
</div>
<script src="js/jquery.js"></script>
<script>
function GetKelurahan(id) {
    if (id.length == 0) { 
        alert("Pilih Kecamatan");
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
removeOptions(document.getElementById("id_kelurahan"));
set_kelurahan(myArr);
            }
        };
        xmlhttp.open("GET", "get_kelurahan.php?id=" + id, true);
        xmlhttp.send();
    }
}

function set_kelurahan(data) {
for(var i = 0; i < data.length; i++) {
$('#id_kelurahan').append(
            $("<option></option>").text(data[i].nama).val(data[i].id)
);
}
}

function removeOptions(selectbox){
    var i;
    for(i = selectbox.options.length - 1 ; i >= 0 ; i--)
    {
        selectbox.remove(i);
    }
}
</script>

Ketiga
Buat file bernama get_kelurahan.php dengan coding sebagai berikut:

<?php
require_once "koneksi.php";
$id = $_GET["id"];
$sql = "SELECT * FROM tbl_kelurahan WHERE id_kecamatan = $id";
$data = mysqli_query($db,$sql);

$data_lurah = array();
while($row = mysqli_fetch_array($data,MYSQLI_ASSOC)) {
$data_lurah[] = array('id' => $row["id_kelurahan"], 'nama' => $row["nama_kelurahan"]); 
}

    echo json_encode($data_lurah);
?>

Hasilnya:

Ketika dipilih kecamatan Tapos, maka yang muncul nama kelurahan yang berada pada kecamatan Tapos saja.

Begitu juga jika memilih kecamatan Cimanggis, yang muncul nama kelurahan di Cimanggis saja.

Penjelasan Kode
Pada file bernama inputan.php, kita membuat 2 listbox dengan id id_kecamatan dan id_kelurahan, diform ini kita juga meload semua data kecamatan dari tabel dan diurutkan berdasarkan nama kecamatan secara ascending (A-Z), lihat query berikut:

$sql = "SELECT * FROM tbl_kecamatan ORDER BY nama_kecamatan ASC";

Lalu pada listbox kecamatan kita tambahkan event OnChange, dimana setiap data berubah maka akan memanggil fungsi GetKelurahan dengan parameter id

onChange="GetKelurahan(this.value)" 

Pada javascript fungsi GetKelurahan, kita menggunakan xmlhttprequest dengan method GET, mengirim data id_kecamatan ke file get_kelurahan.php dengan parameter id

xmlhttp.open("GET", "get_kelurahan.php?id=" + id, true);xmlhttp.send();

Jika status yang diterima dari servernya OK ,maka lakukan parsing dari data yang diterima dan panggil fungsi set_kelurahan 

if (this.readyState == 4 && this.status == 200) { var myArr = JSON.parse(this.responseText); removeOptions(document.getElementById("id_kelurahan")); set_kelurahan(myArr);}

Fungsi removeOptions dipanggil sebelum set_kelurahan agar data listbox kelurahan tidak double atau masih ada data sebelumnya.

removeOptions(document.getElementById("id_kelurahan"));

Di fungsi set_kelurahan  kita hanya melakukan looping berdasarkan data hasil parsing.

Pada file bernama get_kelurahan.php, kita mengirim data berdasarkan id_kecamatan yang diterima,lihat query:

$sql = "SELECT * FROM tbl_kelurahan WHERE id_kecamatan = $id";

Data hasil query akan ditampung di array bernama data_lurah kemudian di encode sehingga berupa JSON. Data yang dihasilkan seperti berikut :

Semoga Bermanfaat

rerefensi : https://www.w3schools.com/xml/xml_http.asp
                 http://php.net/manual/en/function.json-encode.php

Artikel ini dibuat oleh Yudha Tri Putra sebagai penulis artikel, diperbolehkan menyalin artikel ini secara utuh tanpa mengubah atau menambah isi artikel.