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

Atau ini: http://www.bengkelprogram.com/pilihancombo.php
Download sourcenya: http://www.bengkelprogram.com/download-pilihancombo.zip

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.

Aryo:

Nampaknya file PHP tidak berjalan. Apakah kamu yakin file .html itu kamu panggil lewat webserver (Apache)? Paling tidak, combobox pertama harusnya tetap tampil.

Aryo Sanjaya

aryo.sanjaya@... Sabtu Legi, 8 Juli 2006

Riki, Ini yang kamu maksudkan script yang kamu coba di komputermu, atau yang di /coba/tescombobox.html ? Kalo yang /coba/tescombobox.html aku rasa tidak ada masalah. IE dan Firefox bisa jalan. Kalo yang kamu maksudkan adalah percobaan script di komputermu, maka yang perlu diyakinkan adalah script PHP (ambildata.php) bisa diakses. Pastikan kamu menjalankannya lewat Apache (localhost), tidak dibuka secara langsung lewat Internet Explorer.

klikanan

klikanan@... Sabtu Pahing, 2 September 2006

guru...wahhh saya gak banyak dan mungkin saya banyak pertanyaan....,krn saya buta bgt... hmmm...saya sangat ingin mendalami php, apa yang harus saya lakukan agar saya dpt dengan cepat menjadi seperti guru...apakah saya harus bertapa, puasa 30 hr pada bulan ramadhan, ato saya hrs berlari kehutan dan menuju kepantai..mohon petunjuk dan bimbingan guru-guru semua... semoga guru2 diterima di sisiNYA ya.. amiiin...

Aryo:

hehehe, good for you ;;)

rusman sipayung

rusmantristan85@... Selasa Kliwon, 5 September 2006

horas... temen2 sekalian...... aku mo nanya nich : Pilihannya itu dibuat dalam database nya dengan tujuan untuk menampilkan laporan

Aryo:

Untuk mengambil datanya dari database, mungkin ambildata.php dapat dirubah menjadi seperti ini:

<?php $namaserver = "localhost"; $username = "root"; $password = ""; $database = "namadatabase"; mysql_connect($namaserver, $username, $password) or die("Tidak dapat konek"); mysql_select_db($database) or die("Tidak dapat membuka database"); $kode = $_GET['kode']; echo "<select name='kedua'>"; $rs = mysql_query("select nilai,teks from namatabel where jenis='$kode' "); while ($r = mysql_fetch_array($rs)) echo "<option value='$r[nilai]'>$r[teks]</option>"; echo "</select>"; ?>

Tentu saja harus disesuaikan dulu database, tabel dan field-fieldnya.

Must Trie

must.trie@... Senin Pon, 18 September 2006

Saya coba buat sesuai script, tapi saat tescombobox.html di submit.....kenapa value dari ambildata.php tidak bisa tampil yah ??

farhan

farhan386@... Sabtu Wage, 14 Oktober 2006

kalo yang ga pake XMLHttp bagaimana ya. Setahu saya itu kan hanya bisa digunakan di Internet Explorer sama Firefox. Kalo usernya pake browser lain gemana

raden

radenhar@... Kamis Pon, 2 November 2006

Saya sudah coba pada web server dengan phptriad hasilnya = OK.
Tapi setelah saya upload ke server yang sebenarnya malah tidak bisa jalan (tampil combo yang pertama, setelah dipilih ngggak ada reaksi apa-apa).coba di http://www.buattes.datadiri.com

Kalo boleh tanya lagi, saya punya kode program untuk select option juga tidak jalan.
berikut kodenya :

<?php <html> <head> <title>Tes</title> </head> <body> <form name="form1" method="get" action="hasil.php"> <select name="pilih"> <option value="1">tes1</option> <option value="2">tes2</option> <option value="3">tes3</option> <option value="4">tes4</option> </select><br><input type="submit" name="Submit" value="Submit"> </form> </body> </html> ?>

saya simpan dengan nama form.php
Kemudian kode pemrosesnya :

<?php <html> <head> <title>tes</title> </head> <body> <?php echo "$pilih";?> </body> </html> ?>
Saya simpan dengan nama hasil.php.
Ciri-cirinya adalah hasil setelah di submit terdapat halaman kosong .
Mahon bantuannya kepada para Guru.

radenhar@yahoo.com

imunk

imunk_my@... Jum'at Pon, 17 November 2006

kalo saat diklik combobox tersebut terus yg tampil bukan combobox lagi gmn ya?? misal dipilih pd combobox yg berisi "kode" terus dibawahnya muncul "nama" tp tulisan biasa gitu kayak pake perintah "echo/print" gitu.... tolong dong penjelasannya... terima kasih..

guntur

gunturris@... Selasa Pon, 12 Desember 2006

Untuk case seperti ini sih ada baiknya untuk mencoba JSON, seperti yang digunakan pada page: http://www.carikost.org/carikost.php Lebih lanjut apa itu JSON (JavaScript Object Notation), silakan buka http://www.json.org Rgds

sandi

h_z_hammam@... Selasa Pon, 12 Desember 2006

Aku coba rubah ambil datanya menjadi seperti ini :
<? $kode = $_GET['kode']; echo "<select name='kedua'>"; if($kode==1){ echo"<option value="satu">satu</option>"; } echo "</select>"; ?>
tetapi kok tidak muncul ya, apa yang slah ya. mohon bantuannya.

URL: http://www.bengkelprogram.com/data-artikel-330.0.bps