Teknik Bertingkat Membuat Combo Box

/ April 12, 2010 / 27 Comments / Komunitas Programmer, Komunitas Web

Teknik bertingkat membuat combo box dimaksud adalah bagaimana kita membuat sebuah combo box yang datanya dipengaruhi oleh pilihan dari combo box sebelumnya.

Ilustrasinya sebagai berikut:
Combo box pertama: Berisikan data nama-nama provinsi
Combo box kedua: Berisikan data nama-nama kota, dimana data kota ini tergantung dari pilihan data propinsi pada combo box pertama.

Adapun langkah-langkahnya sebagai berikut:

1. Buat index.php sebagai berikut:

2. Tambahkan Script JS ini dan letakkan di atas </body>

3. Kemudian perhatikan pada code: document.getElementById(“divkedua”).innerHTML = xmlhttp.responseText;, nah itu adalah lokasi tempat penyimpanan hasil eksekusi pada combo box pertama tadi yaitu di dalam tag dengan id=divkedua.

nah di bawah </select> tambahkan <div id=”divkedua”></div>

4. Kemudian perhatikan pada code: xmlhttp.open(‘get’, ‘ambildata.php?kode=’+kode, true);, nah itu adalah sebuah file ambildata.php yang isi dari file tersebut adalah combo box kedua yang nilai datanya dipengaruhi oleh nilai dari combo box pertama dengan menggunakan perintah ?kode=nilai_combo_box_pertama

5. Kemudian buat file ambildata.php sebagai berikut:

6. Selesai

Demikian langkah-langkah pembuatan combo box bertingkat, pada contoh ini kita hanya menerapkan dua combo box. Untuk membuat lebih dari dua, kuncinya pada:

function rubah(combobox)
id=divkedua
ambildata.php

Anda bisa menggunakan database untuk mengambil nilai data dari combo box tersebut, Selamat mempelajari…

Tags: , ,