Merubah Isi Combobox

Pada artikel ini dibahas bagaimana cara merubah isi suatu combobox, sesuai dengan isi combobox lain yang dipilih oleh user

Selasa Legi, 4 April 2006

Kadang kala, kita ingin menampilkan combobox yang berisi data dinamis, yang isinya tergantung pada pilihan user.

Misalnya saja combobox untuk memilih Nama Kecamatan, maka isi combobox tersebut hanya berisi nama kecamatan yang ada dalam kabupaten yang dipilih.

Hal ini selain memudahkan user untuk memilih nama kecamatan, juga meringankan proses transfer data. Bayangkan seandainya seluruh data kecamatan ditampilkan pada combobox dalam saat yang bersamaan, tentu menjadi tidak efisien.

Konsep yang digunakan adalah teknik AJAX, yang akan menangani proses perubahan combobox, setiap kali isi suatu combobox utama dirubah. Silakan merujuk ke artikel AJAX langkah 1 untuk dasar AJAX.

Untuk mencoba teknik ini, silakan simpan file HTML berikut ini dengan nama tescombobox.html:

<html> <head> <title>Tes Combobox</title> </head> <body> <script type='text/javascript'> function createRequestObject() { var ro; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ ro = new ActiveXObject("Microsoft.XMLHTTP"); }else{ ro = new XMLHttpRequest(); } return ro; } var xmlhttp = createRequestObject(); function rubah(combobox) { var kode = combobox.value; if (!kode) return; xmlhttp.open('get', 'ambildata.php?kode='+kode, true); xmlhttp.onreadystatechange = function() { if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) document.getElementById("divkedua").innerHTML = xmlhttp.responseText; return false; } xmlhttp.send(null); } </script> <form> <select name="satu" onchange="javascript:rubah(this)"> <option value=''>-pilih-</option> <option value='1'>Satu</option> <option value='2'>Dua</option> <option value='3'>Tiga</option> </select> <div id="divkedua"> </div> </form> </body> </html>

Script PHP, simpan dengan nama ambildata.php:

<?php $kode = $_GET['kode']; echo "<select name='kedua'>"; for($i = 0; $i < $kode; $i++) echo "<option>Isi $kode: $i</option>"; echo "</select>"; ?>

Proses yang terjadi, diawali dari script utama (tescombobox.html), dengan langkah sebagai berikut:

melihat event pada combobox pertama (name "satu")
jika terjadi perubahan pilihan (event onchange), maka fungsi rubah( ) akan dijalankan
pada fungsi rubah, diambil value dari pilihan yang baru
mem-fetch script ambildata.php dengan parameter kode sesuai value yang dipilih
user menunggu output dari ambildata.php
script ambildata.php dijalankan, dan memproses kode yang diberikan
memberikan output sesuai dengan hasil proses
output diterima oleh javascript, dan ditampilkan

Selesai.

Maka nanti ketika form tersebut disubmit, maka akan terdapat 2 combobox, dengan value masing-masing.

Kode di atas masih sangat sederhana, karena hanya untuk menunjukkan cara kerja teknik perubahan isi combobox. Jika ingin dikembangkan, maka data yang dikembalikan oleh ambildata.php dapat diambil dari database misalnya.

Untuk mencoba teknik tersebut, silakan gunakan link ini: http://www.bengkelprogram.com/coba/tescombobox.html

Semoga bermanfaat.

Daftar Komentar

Riki Risnandar

riki@... Jum'at Kliwon, 7 Juli 2006

scriptnya dicoba di firefox tidak muncul.yang tampil hanya combo box yang kosong.

di IE malah tidak muncul combo box keduanya.

mohon bantuannya.
thanks.

URL: https://bengkelprogram.com/data-artikel-330.0.bps