Membuat ComboBox Dinamis Dengan JQuery
ComboBox atau element Select pada halaman website adalah elemen form yang sangat berguna untuk melakukan pemilihan data. Namun seringkali terjadi kesalahan pemilihan data seperti ketika memilih propinsi pada suatu pulau, malah memilih propinsi di pulau lainnya. Oleh karena itu combobox harus di design secara baik agar dapat mengurangi kesalahan input user.
Berikut adalah teknik untuk mendesign ComboBox dinamis dalam kasus pemilihan data lokasi.

Pada gambar diatas apabila ComboBox pulau dipilih maka JavaScript akan mengambil data propinsi yang berada pada pulau tersebut lalu menampilkannya ke dalam pilihan ComboBox propinsi, begitu juga pada saat ComboBox propinsi dipilih maka akan mengubah isi ComboBox kabupaten / kota.
Berikut adalah relasi table untuk membuat program ini:

Dan ini adalah penggalan JavaScript untuk load data dengan Ajax dan menampilkannya pada ComboBox:
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | function loadData(type,parentId){ // berikan kondisi sedang loading data ketika proses pengambilan data $('#loading').text('Loading '+type.replace('_','/')+' data...'); $.post('load_data.php', // request ke file load_data.php {data_type: type, parent_id: parentId}, function(data){ if(data.error == undefined){ // jika respon error tidak terdefinisi maka pengambilan data sukses $('#combobox_'+type).empty(); // kosongkan dahulu combobox yang ingin diisi datanya $('#combobox_'+type).append('<option>-Pilih data-</option>'); // buat pilihan awal pada combobox for(var x=0;x<data.length;x++){ // berikut adalah cara singkat untuk menambahkan element option pada tag <select> $('#combobox_'+type).append($('<option></option>').val(data[x].id).text(data[x].nama)); } $('#loading').text(''); // hilangkan text loading }else{ alert(data.error); // jika ada respon error tampilkan alert } },'json' // format respon yang diterima langsung di convert menjadi JSON ); } $(function(){ // pertama kali halaman di-load, maka ambil seluruh data pulau loadData('pulau',0); // fungsi yang dipanggil ketika isi dari combobox pulau dipilih $('#combobox_pulau').change( function(){ // apabila nilai pilihan tidak kosong, load data propinsi if($('#combobox_pulau option:selected').val() != '') loadData('propinsi',$('#combobox_pulau option:selected').val()); } ); // fungsi yang dipanggil ketika isi dari combobox propinsi dipilih $('#combobox_propinsi').change( function(){ // apabila nilai pilihan tidak kosong, load data kabupaten/kota if($('#combobox_propinsi option:selected').val() != '') loadData('kabupaten_kota',$('#combobox_propinsi option:selected').val()); } ); }); |
Dan untuk script PHP yang menerima request dari Ajax tidak begitu rumit:
// proses akan berjalan ketika ada inputan data_type dan parent_id berupa POST if(isset($_POST['data_type']) && isset($_POST['parent_id'])){ $data_type = $_POST['data_type']; $parent_id = $_POST['parent_id']; /* Custom SQL Query per masing-masing request. * setiap field di beri alias id dan nama agar proses di javascript tidak direpotkan * oleh penamaan field yang berbeda per tiap jenis data. * */ switch($data_type){ case 'kabupaten_kota': $sql = "SELECT id_$data_type id, nama_$data_type nama FROM peta_$data_type WHERE propinsi_id = '$parent_id'"; break; case 'propinsi': $sql = "SELECT id_$data_type id, nama_$data_type nama FROM peta_$data_type WHERE pulau_id = '$parent_id'"; break; case 'pulau': default: $sql = "SELECT id_$data_type id, nama_$data_type nama FROM peta_pulau"; } mysql_connect('localhost','root','') or die(mysql_error()); // koneksi ke server database mysql_select_db('test')or die(mysql_error()); // pilih database $response = array(); // siapkan respon yang nanti akan di convert menjadi JSON $query = mysql_query($sql); if($query){ if(mysql_num_rows($query) > 0){ while($row = mysql_fetch_object($query)){ // masukan setiap baris data ke variable respon $response[] = $row; } }else{ $response['error'] = 'Data kosong'; // memberi respon ketika data kosong } }else{ $response['error'] = mysql_error(); // memberi respon ketika query salah } die(json_encode($response)); // convert variable respon menjadi JSON, lalu tampilkan }
PHP memberi respon berupa JSON agar lebih mudah di proses di JavaScript.
Demo dari program ini: DEMO
Download program ini: DOWNLOAD
Semoga bisa bermanfaat dan menjawab semua pertanyaan para pengunjung sekalian… ^_^



Chandra Jatnika

hebat… sangat produktif
hehehee,,makasih mas dah dibuatin artikelnya
sangat bagus mas artikel di sitemu, numpang sedot mas
sip artikelnya, coba deh
siip banget artikelnya..
sangat bemnfaat
makasih banget..sangat ngebantu..
oiy..klo buat di form editnya gmna ya??
kn nilai di combobox harus udah ada dulu??
mohon bantuannya..
mas kok saya implementasikan di themes wordpress ga bisa y..??
mohon bantuannya…
:D
kalo misalkan kita pilih jawa->jawa barat->bandung trus pengen nampilin data yang ada di bandung tapi bukan berupa combo box lagi gimana ya??
mohon pencerahan nya..
berarti ada 3 kali gunakan ajax disini.
di script saya cuma ada 2 kali nge-load ajax, ketika combo terakhir kasih event onChange aja lagi lalu load data dari bandung berdasar id yg dipilih.
memang mau buat apa di wordpress? ini memang dibuat khusus utk form2 standar di aplikasi, bukan di wordpress
form editnya saya gak sediain. di artikel ini cuma untuk cara menampilkan data saja