Senin Pahing 07 Oktober 2024 06:22

learn make rich

share make it perfect

Ayat Suci

Inilah anugerah kami; maka berikanlah (kepada orang lain) atau tahanlah (untuk dirimu sendiri) dengan tiada pertanggungan jawab.
(QS. SHAAD:39)

otomatis refresh

Javascript ayat

Proyek Saat Ini

Aplikasi SMS
Download aplikasi
Download Source (Delphi)

SMS Autorespond (VB)

Daftar Fungsi

pasaran
Mencari nama hari dan nama pasaran

pdu2sms
Konversi dari PDU ke Teks SMS

bacarss
Membaca RSS dari beberapa situs

Para Rekan

FlazX.com - Your Computer & IT Learning Center & eBook Directory

Misi penyelamatan data, baik oleh virus, harddisk rusak ataupun hilang

Delphindo
Delphindo

Link Exchange

MyWeblog

Merubah Isi Combobox

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

Aryo Sanjaya

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.

Kirim via Email :: Tampilkan Versi Cetak

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.

Mengisi Komentar

Daftar Artikel PHP

» Menghitung Jarak Waktu (4)

Rabu Wage, 17 Mei 2006

Mengitung jarak waktu dan menampilkan sebagai Javascript

» Grabbing Kurs Dari BI (10)

Rabu Pahing, 5 April 2006

Grabbing data adalah tindakan tidak sopan. Tapi kali ini yang dibahas adalah teknik grabbing, masalah moral dan etika silakan cari sendiri (inspired by Iwan Fals)

» Autocomplete Pada Form (1)

Rabu Pahing, 5 April 2006