Unsecured debt consolidation loan


Saturday, 7 May 2011

Combo Box Dinamis

Udah lama gak buat artikel tutorial di blog ini. Akhirnya sempet juga.

Kali ini kita akan coba membuat combo box dinamic dengan javascript dan event onChange. Fungsi dari combo box ini adalah untuk mengelompokan subkategori berdasarkan kategori induknya.

Untuk contoh adalah membuat form select drop down untuk kota berdasarkan provinsi.
Contohnya adalah seperti berikut.



Nama Provinsi
Kota



Sudah ada gambaran kan?
Source code untuk membuat form seperti di atas adalah seperti berikut:

<script>
function subkategori(){
var nilai=document.form.provinsi.value;

if(nilai==1)
document.getElementById("kota").innerHTML="Kota <select name='kota'><option value=1>Bandung</option><option value=2>Sukabumi</option></select>";
else if(nilai==2)
document.getElementById("kota").innerHTML="Kota <select name='kota'><option value=1>Semarang</option><option value=2>Ambarawa</option></select>";
else if(nilai==3)
document.getElementById("kota").innerHTML="Kota <select name='kota'><option value=1>Surabaya</option><option value=2>Banyuwangi</option></select>";
}
</script>

<form name="form">
Nama Provinsi <select name="provinsi" onChange="subkategori();">
<option value=1>Jawa Barat</option>
<option value=2>Jawa Tengah</option>
<option value=3>Jawa Timur</option>
</select>
<div id="kota">
Kota <select name='kota'><option value=1>Bandung</option><option value=2>Sukabumi</option></select>
</div>
</form>

Pada bagian form kita menyisipkan onChange="subkategori();" gunanya adalah untuk memanggil fungsi javascript subkategori() ketika terjadi perubahan data yang dipilih.

Lalu kita mengisikan var nilai=document.form.provinsi.value; pada fungsi subkategori() untuk melakukan pengecekan value/nilai yang dipilih oleh user.

Setelah itu kita pisahkan hasil yang akan ditampilkan sesuai dengan nilai yang dipilih user dengan if. Yang terakhir adalah menampilkannya ke browser dengan document.getElementById("kota").innerHTML.

Selamat mencoba. Tolong komentarnya yah. Makasih..

1 comments:

Mantap mas, nah gimana kalo dari database mas, misalnya sy pilih kode barang pada combo, nantinya akan menampilkan nama barang pada textbox dibawahnya...Thx

Post a Comment

Enter your email address:

Delivered by FeedBurner