Kasus: ada input combobox pilih provinsi, setelah dipilih, tiba-tiba combobox kabupaten berubah isinya. Oke, langsung saja kita buat hal semacam itu dengan gabungan PHP serta Javascript.
Tugas PHP
Kemungkinan besar kamu menyimpan data provinsi dan kabupaten di database atau di file. Nah, PHP berguna untuk mengambil data tersebut dan mempersiapkannya untuk digunakan Javascript mengubah isian combobox secara dinamis. Jika kamu memiliki data yang sudah ada di dalam Javascript tentu saja kamu tidak butuh PHP lagi.
Tugas Javascript
Dia akan mendeteksi perubahan combobox provinsi lalu secara otomatis mengubah isi di combobox kabupaten. Ada beberapa metode yang dilakukan oleh Javascript dalam melakukan hal ini antara lain:
- Saat combobox provinsi berubah, Javascript melakukan request Ajax ke file PHP untuk mendapatkan data yang akan diisikan di combobox kabupaten (mungkin ada jeda sebelum input kabupaten berubah karena request Ajax)
- Data dari PHP diubah ke JSON pada halaman tersebut dan Javascript langsung membacanya (ini lebih cepat tapi untuk data yang besar browsermu akan menyita cukup banyak memory)
Contoh yang aku berikan nanti akan menggunakan cara kedua karena datanya hanya sedikit.
HTML
Berikut ini kode HTML sebagai kerangka dasarnya, masalah tampilan dicuekin saja :)
<?php
// tulis php disini
?><!DOCTYPE html>
<html>
<head>
<title>Combobox Dinamis</title>
</head>
<body>
<form method="post" action="">
Provinsi: <select name="provinsi" id="provinsi"></select><br /><br />
Kabupaten: <select name="kabupaten" id="kabupaten"></select><br /><br />
<button type="submit">SIMPAN</button>
</form>
<script type="text/javascript">
// tulis javascript disini
</script>
</body>
</html>
PHP
Tulis kode ini di bagian PHP (paling atas sebelum DOCTYPE)
<?php
// data provinsi bisa saja dari database, misalkan dengan query
// SELECT * FROM provinsi
// dengan kolom: id_provinsi, nama_provinsi
$provinsi = array(
0 => array('1', 'Banten'),
1 => array('2', 'Yogyakarta'),
2 => array('3', 'Bali'),
);
// data kabupaten, kalau dari database
// SELECT * FROM kabupaten
// dengan kolom: id_kabupaten, id_provinsi, nama_kabupaten
$kabupaten = array(
0 => array('1', '1', 'Tangerang'),
1 => array('2', '1', 'Serang'),
2 => array('3', '1', 'Lebak'),
3 => array('4', '1', 'Pandeglang'),
4 => array('5', '1', 'Cilegon'),
5 => array('6', '2', 'Bantul'),
6 => array('7', '2', 'Sleman'),
7 => array('8', '2', 'Kulonprogo'),
8 => array('9', '2', 'Gunungkidul'),
8 => array('10', '2', 'Yogyakarta'),
9 => array('11', '3', 'Badung'),
10 => array('12', '3', 'Bangli'),
11 => array('13', '3', 'Buleleng'),
12 => array('14', '3', 'Gianyar'),
13 => array('15', '3', 'Jembrana'),
14 => array('16', '3', 'Karangasem'),
15 => array('17', '3', 'Klungkung'),
16 => array('18', '3', 'Tabanan'),
17 => array('19', '3', 'Denpasar'),
);
?>
Di kode diatas data provinsi dan kabupaten dituliskan langsung tapi bisa saja data itu berasal dari database. Asalkan kamu tahu asal-usul dan bentuk data yang ada tentunya tidak akan sulit untuk menggunakannya dan disesuaikan dengan data yang kamu punya.
Javascript
Berikut ini kode javascript yang digunakan, tuliskan sebelum tag body (paling bawah)
<script type="text/javascript">
// mendapatkan object dalam document
function getObject(id) {
return document.getElementById(id);
}
// ubah data array PHP ke JSON
var provinsi = <?php echo json_encode($provinsi) ?>;
var kabupaten = <?php echo json_encode($kabupaten) ?>;
var option = '<option value="0" selected>-- pilih provinsi --</option>',
// opsi default dengan nilai 0
comboprovinsi = getObject('provinsi'),
combokabupaten = getObject('kabupaten');
// inject provinsi
for (var i = 0; i < provinsi.length; i++) {
option += '<option value="' + provinsi[i][0] + '">' + provinsi[i][1] + '</option>';
}
comboprovinsi.innerHTML = option;
// inject kabupaten
combokabupaten.innerHTML = '<option value="0">-- pilih kabupaten --</option>';
// add event listener ke combobox, atau lebih gampang buat fungsi dan
// tambahkan property onchange di html combobox provinsi
comboprovinsi.addEventListener('change', function(e) {
var option = '',
selected = this.value;
// jika belum memilih
if (selected == '0') {
combokabupaten.innerHTML = '<option value="0">-- pilih kabupaten --</option>';
return;
}
// cacah array kabupaten
for (var i = 0; i < kabupaten.length; i++) {
if (kabupaten[i][1] == selected) {
option += '<option value="' + kabupaten[i][0] + '">' + kabupaten[i][2] + '</option>';
}
}
combokabupaten.innerHTML = option;
}, false);
</script>
Lihat variabel provinsi dan kabupaten, keduanya berasal dari array data yang dihasilkan oleh PHP dan diubah menjadi JSON menggunakan fungsi json_encode() di PHP. Untuk mengubah isi dari option dalam combobox kita menggunakan perintah innerHTML pada object element HTML yang kita dapatkan menggunakan fungsi getObject(). Fungsi getObject() berusaha mencari elemen dengan ID "provinsi" dan "kabupaten", jadi jika kamu mengubah kode diatas pastikan nama ID yang kamu gunakan benar. Kita menggunakan eventListener pada object combobox provinsi sehingga saat input ini nilainya diubah ("change") maka javascript akan mengubah isi dari combobox kabupaten.
Ada cara lain untuk menambahkan event pada combobox provinsi yaitu dengan menambahkan properti "onchange" pada tag selectnya. Contohnya seperti ini:
<select name="provinsi" id="provinsi" onchange="ubahKabupaten(this)"></select>
otomatis Javascriptnya juga berubah, kita tidak menggunakan addEventListener lagi tapi langsung saja buat fungsi ubahKabupaten() seperti ini:
function ubahKabupaten(obj) {
...
}
Dengan jQuery?
Jika kamu belum tau jQuery, coba googling dulu. Pastikan kamu sudah menginclude jQuery ke halamanmu dengan tag <script src="path/ke/jquery"></script>. Perubahannya hanya pada bagian untuk mendapatkan object DOM. berikut ini kodenya (kalau pakai jQuery berarti kode Javascript sebelumnya diganti dengan yang ini):
<script type="text/javascript">
// ubah data array PHP ke JSON
var provinsi = <?php echo json_encode($provinsi) ?>;
var kabupaten = <?php echo json_encode($kabupaten) ?>;
var option = '<option value="0" selected>-- pilih provinsi --</option>',
$comboprovinsi = $('#provinsi');
var $combokabupaten = $('#kabupaten').html('<option value="0">-- pilih kabupaten --</option>');
// inject provinsi
for (var i = 0; i < provinsi.length; i++) {
option += '<option value="' + provinsi[i][0] + '">' + provinsi[i][1] + '</option>';
}
$comboprovinsi.html(option).on('change', function() {
var option = '',
selected = $(this).val();
// jika belum memilih
if (selected == '0') {
$combokabupaten.html('<option value="0">-- pilih kabupaten --</option>');
return;
}
// cacah array kabupaten
for (var i = 0; i < kabupaten.length; i++) {
if (kabupaten[i][1] == selected) {
option += '<option value="' + kabupaten[i][0] + '">' + kabupaten[i][2] + '</option>';
}
}
$combokabupaten.html(option);
});
</script>
Demikianlah combobox dinamis versiku semoga bermanfaat. Jika kamu berminat mendapatkan sourcenya ada disini. Happy coding :)
