Pertama di Indonesia: "Murottal Al Qur'an + Terjemahan" dalam bentuk CD MP3 Original (Membuat Pilihan Combobox Dinamis Tanpa AJAX
May 13th, 2009 | by rosihanari |
Cetak Artikel Ini
Ada salah seorang rekan (mas Arif Budiman) yang sekaligus menjadi member saya menanyakan “Bisakah membuat pilihan combobox dinamis tanpa menggunakan AJAX?”.
Beliau menggambarkan kasusnya sebagai berikut:
Misalkan terdapat dua buah combobox. Combobox pertama berisi pilihan tentang spesialisasi dokter, serta combobox kedua berisi pilihan dokter yang sesuai pada spesialisasi dalam combobox pertama. Sebagai contoh misalkan pada combobox pertama dipilih spesialisasi penyakit dalam, maka secara otomatis dan langsung pada combobox dua menampilkan daftar pilihan dokter yang spesialisasinya penyakit dalam. Adapun data yang ditampilkan pada kedua combobox disimpan dalam database MySQL sehingga tidak bersifat statis.
Memang solusi yang bisa dipilih untuk menyelesaikan kasus di atas adalah dengan AJAX (Asynchronous Javascript and XML). Namun… bagi yang belum paham tentang AJAX, jangan khawatir.. ada kok solusi lainnya yaitu dengan menggunakan gabungan Javascript DOM dan PHP.
Mau tahu caranya? Nah… simak lebih lanjut artikel ini 
OK bagaimana sih konsep penggunaan gabungan antara Javascript DOM dan PHP untuk menyelesaikan kasus di atas? Ya.. konsepnya adalah kita akan mengenerate Javascript DOM dengan PHP. Javascript itu nanti yang akan digunakan untuk memberikan efek dinamisnya.
Mungkin ada yang bertanya, ngapain harus pakai PHP? apa dengan Javascript DOM saja tidak cukup? Mmm… jawabannya saya belum tahu karena saya belum pernah menjumpai cara koneksi dari Javascript ke MySQL. Kemungkinan bisa dengan menggunakan ODBC, namun saya belum pernah mencobanya. Mengingat Javascript adalah client side (artinya terletak di sisi client) dan MySQL adalah server side (terletak di sisi server), maka kita butuh server side scripting yang bisa mengenerate Javascript sekaligus bisa koneksi ke MySQL di server, dalam hal ini kita menggunakan PHP.
Nah.. kembali ke masalah di atas, pada artikel ini akan dibahas contoh aplikasinya namun dengan kasus yang diambil tidak sesuai dengan kasus yang dicontohkan mas Arif Budiman di atas. Adapun kasus yang saya ambil di sini adalah terkait pemilihan Nama Propinsi dan Nama Kabupaten.
Skenario dari aplikasi ini adalah, setelah user memilih salah satu nama propinsi dari combo box pertama, maka secara otomatis pada combo box kedua memunculkan daftar pilihan nama-nama kabupaten yang terdapat pada propinsi terpilih.
Sesuai kasus pertama yang disampaikan mas Arif di atas, yaitu data pilihan dalam combo box disimpan dalam MySQL, maka terlebih dahulu kita siapkan tabel dan sampel datanya untuk kasus ini.
CREATE TABLE propinsi ( idProp int(11), namaPropinsi varchar(50), PRIMARY KEY (idProp) ) CREATE TABLE kab ( idKab int(11), namaKabupaten varchar(50), idProp int(11), PRIMARY KEY (idKab) ) INSERT INTO propinsi VALUES (1, 'Jawa Tengah'); INSERT INTO propinsi VALUES (2, 'Jawa Barat'); INSERT INTO propinsi VALUES (3, 'Jawa Timur'); INSERT INTO kab VALUES (1, 'Kab. A', 1); INSERT INTO kab VALUES (2, 'Kab. B', 1); INSERT INTO kab VALUES (3, 'Kab. C', 1); INSERT INTO kab VALUES (4, 'Kab. D', 2); INSERT INTO kab VALUES (5, 'Kab. E', 2); INSERT INTO kab VALUES (6, 'Kab. F', 2); INSERT INTO kab VALUES (7, 'Kab. G', 3);
Dari sampel data di atas tampak bahwa untuk propinsi Jawa Tengah terdapat 3 kabupaten yang bisa dipilih yaitu A, B dan C. Jawa Barat terdapat 2 kabupaten yaitu D dan E, sedangkan Jawa Timur terdapat kabupaten F dan G.
OK.. langkah berikutnya kita terlebih dahulu siapkan halaman untuk membuat combobox pertama.
demo.php
<?php // koneksi mysql mysql_connect('dbhost', 'dbuser', 'dbpass'); mysql_select_db('dbname'); ?> <html> <head> </head> <body> <h1>Demo</h1> <form name="demo" method="post" action="submit.php"> <table> <tr><td>Pilih Propinsi</td><td>:</td> <td> <select name="prop" onchange="showKab()"> <option>Silakan Pilih</option> <option>------------------------</option> <?php // query untuk menampilkan propinsi $query = "SELECT * FROM propinsi"; $hasil = mysql_query($query); while ($data = mysql_fetch_array($hasil)) { echo "<option value='".$data['idProp']."'>".$data['namaPropinsi']."</option>"; } ?> </select> </td> </tr> </table> </form> </body> </html>
Dari script di atas ada beberapa catatan yang perlu kita perhatikan adalah: untuk form kita berikan nama ‘demo’ (name=”demo”), kemudian pada combobox propinsi tersebut kita kasih event ‘onchange‘. Maksudnya adalah ketika proses selection pada combobox tersebut dilakukan maka akan muncul suatu efek tertentu. Nah… event ‘onchange’ ini nanti akan memanggil function dalam Javascript bernama showKab().
Selanjutnya, kita buat juga combobox kedua untuk memilih kabupatennya. Combobox ini kita letakkan dalam form yang sama dengan combobox kedua. Namun.. untuk combobox kedua ini, kita kasih NULL option atau sementara tidak ada daftar option pilihannya karena option tersebut nantinya akan digenerate secara dinamis.
demo.php
<?php // koneksi mysql mysql_connect('dbhost', 'dbuser', 'dbpass'); mysql_select_db('dbname'); ?> <html> <head> </head> <body> <h1>Demo</h1> <form name="demo" method="post" action="submit.php"> <table> <tr><td>Pilih Propinsi</td><td>:</td> <td> <select name="propinsi" onchange="showKab()"> <option>Silakan Pilih</option> <option>------------------------</option> <?php // query untuk menampilkan propinsi $query = "SELECT * FROM propinsi"; $hasil = mysql_query($query); while ($data = mysql_fetch_array($hasil)) { echo "<option value='".$data['idProp']."'>".$data['namaPropinsi']."</option>"; } ?> </select> </td> </tr> <tr><td>Pilih Kabupaten</td><td>:</td> <td> <select name="kab" id="kabupaten"> </select> </td> </tr> </table> </form> </body> </html>
Perlu dicatat pula bahwa untuk combobox kedua ini kita perlu beri nama id (id=”kabupaten”) karena akan digunakan sebagai referensi untuk Javascript DOM nya. Javascript DOM nantinya akan mengenerate daftar item option ke dalam komponen berdasarkan nama id ini.
Nah… selanjutnya kita akan berfokus ke dalam Javascript DOM nya.
Anda sudah mengenal Javascript DOM (Document Object Model) bukan? Ya.. dalam kasus ini Javascript DOM akan digunakan untuk mengisi daftar option pada combox box kedua. Secara umum perintah dalam Javascript DOM untuk menyisipkan tag HTML ke dalam suatu komponen dalam halaman web adalah:
document.getElementById('nama id komponen').innerHTML = "...";
Sehingga dari kasus ini, karena komponen yang akan disisipkan tag HTMLnya adalah yang memiliki id=”kabupaten” maka perintah Javascript DOM nya adalah
document.getElementById('kabupaten').innerHTML = "...";
Keterangan: Tanda titik-titik tersebut nantinya akan diisi dengan tag HTML untuk membuat option comboboxnya.
Berikut ini contoh perintah Javascript DOM untuk menyisipkan option combobox ke dalam komponen id=”kabupaten” bila propinsi yang dipilih adalah Jawa tengah (idProp = 1)
<script language="JavaScript" type="text/JavaScript"> function showKab() { if (document.demo.propinsi.value == "1") { document.getElementById('kabupaten').innerHTML = "<option value='1'>Kab. A</option><option value='2'>Kab. B</option><option value='3'>Kab. C</option>"; } } </script>
Keterangan:
Maksud dari if (document.demo.propinsi.value == "1") adalah bila yang dipilih dari combobox propinsi adalah 1 (Jawa Tengah) maka tampilkan option berisi kabupaten yang ada dalam propinsi Jawa Tengah. Maksud dari ‘demo’ sendiri adalah nama form dimana di dalamnya terletak combobox propinsinya (<form name="demo" .../>), ‘propinsi’ adalah nama komponen dari combobox propinsi (<select name="propinsi" ... />)
Namun… mengingat dalam database terdapat 3 propinsi, kita perlu mengenerate Javascript secara otomatis untuk ketiga propinsi tersebut. Berarti nanti diharapkan terdapat 3 buah IF untuk masing-masing pilihan propinsi. Lantas.. bagaimana cara mengeneratenya? ya… kita gunakan PHP.
<script language="JavaScript" type="text/JavaScript">
function showKab()
{
<?php
// membaca semua propinsi
$query = "SELECT * FROM propinsi";
$hasil = mysql_query($query);
// membuat if untuk masing-masing pilihan propinsi beserta isi option untuk combobox kedua
while ($data = mysql_fetch_array($hasil))
{
$idProp = $data['idProp'];
// membuat IF untuk masing-masing propinsi
echo "if (document.demo.propinsi.value == \"".$idProp."\")";
echo "{";
// membuat option kabupaten untuk masing-masing propinsi
$query2 = "SELECT * FROM kab WHERE idProp = $idProp";
$hasil2 = mysql_query($query2);
$content = "document.getElementById('kabupaten').innerHTML = \"";
while ($data2 = mysql_fetch_array($hasil2))
{
$content .= "<option value='".$data2['idKab']."'>".$data2['namaKabupaten']."</option>";
}
$content .= "\"";
echo $content;
echo "}\n";
}
?>
}
</script>Hasil script di atas akan mengenerate Javascript sbb:
<script language="JavaScript" type="text/JavaScript"> function showKab() { if (document.demo.propinsi.value == "1"){document.getElementById('kabupaten').innerHTML = "<option value='1'>Kab. A</option><option value='2'>Kab. B</option><option value='3'>Kab. C</option>"} if (document.demo.propinsi.value == "2"){document.getElementById('kabupaten').innerHTML = "<option value='4'>Kab. D</option><option value='5'>Kab. E</option><option value='6'>Kab. F</option>"} if (document.demo.propinsi.value == "3"){document.getElementById('kabupaten').innerHTML = "<option value='7'>Kab. G</option>"} } </script>
Nah… terakhir kita gabungkan script di atas dengan script sebelumnya menjadi satu kesatuan.
demo.php
<?php // koneksi mysql mysql_connect('dbhost', 'dbuser', 'dbpass'); mysql_select_db('dbname'); ?> <html> <head> <script language="JavaScript" type="text/JavaScript"> function showKab() { <?php // membaca semua propinsi $query = "SELECT * FROM propinsi"; $hasil = mysql_query($query); // membuat if untuk masing-masing pilihan propinsi beserta isi option untuk combobox kedua while ($data = mysql_fetch_array($hasil)) { $idProp = $data['idProp']; // membuat IF untuk masing-masing propinsi echo "if (document.demo.propinsi.value == \"".$idProp."\")"; echo "{"; // membuat option kabupaten untuk masing-masing propinsi $query2 = "SELECT * FROM kab WHERE idProp = $idProp"; $hasil2 = mysql_query($query2); $content = "document.getElementById('kabupaten').innerHTML = \""; while ($data2 = mysql_fetch_array($hasil2)) { $content .= "<option value='".$data2['idKab']."'>".$data2['namaKabupaten']."</option>"; } $content .= "\""; echo $content; echo "}\n"; } ?> } </script> </head> <body> <h1>Demo</h1> <form name="demo" method="post" action="submit.php"> <table> <tr><td>Pilih Propinsi</td><td>:</td> <td> <select name="propinsi" onchange="showKab()"> <option>Silakan Pilih</option> <option>------------------------</option> <?php // query untuk menampilkan propinsi $query = "SELECT * FROM propinsi"; $hasil = mysql_query($query); while ($data = mysql_fetch_array($hasil)) { echo "<option value='".$data['idProp']."'>".$data['namaPropinsi']."</option>"; } ?> </select> </td> </tr> <tr><td>Pilih Kabupaten</td><td>:</td> <td> <select name="kab" id="kabupaten"> </select> </td> </tr> </table> </form> </body> </html>
Bila Anda coba teknik dan script di atas, maka akan tampil sebagaimana screen shot berikut ini
OK.. selamat mencoba ya… demikian mas Arif Budiman artikelnya mudah-mudahan bermanfaat bagi Anda dan pengunjung setia blog ini semuanya.
[ Download Script ]
UPDATE – Maaf.. ada ralat sedikit.
Sepertinya script di atas tidak bisa jalan di browser IE karena ternyata setelah diselidiki, hal ini diakibatkan oleh tidak supportnya IE untuk menyisipkan tag HTML melalui innerHTML ke dalam komponen SELECT. Sehingga alternatif lain adalah kita ubah perintah
$content = "document.getElementById('kabupaten').innerHTML = \"";
menjadi
$content = "document.getElementById('kabupaten').innerHTML = \"<select name='kab'>";
serta perintah
$content .= "\"";
menjadi
$content .= "</select>\";";
Selanjutnya pada bagian pilih kabupaten
<select name="kab" id="kabupaten"></select>
diganti menjadi
<div id="kabupaten"></div>
hal ini mengingat innerHTML bisa digunakan untuk menyisipkan tag HTML ke dalam komponen DIV, baik dalam IE maupun Firefox.
Beberapa artikel terkait
- Membuat Checkbox Dinamis dan Pemrosesannya
- Membuat Form Dinamis dan Pemrosesannya (Sebuah Studi Kasus)
- Alternatif Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan
- Script Multiple File Upload Dengan PHP
- Alternatif Script Untuk Memproses Input Data Form Dinamis
- Teknik Membuat Script Mengubah Ukuran Image dengan Javascript
- Mencari Selisih Hari dari Dua Buah Tanggal dengan PHP (Tanpa Query SQL)
- Membuat Script PHP untuk Hapus Data dengan Multi Selection
- Tentang DOM di Javascript
- Editing Data Tanggal via Form dengan PHP
Share this article on:
Kata kunci: combobox - DOM - Javascript - PHP -
Rosihan Ari adalah seorang programmer, penulis buku, trainer, peneliti dan berusaha menjadi seorang blogger sejati dengan memberikan yang terbaik buat negeri ini. Berfokus pada computer programming serta computer aided learning for mathematics, ia ingin berbagi ilmu yang dimilikinya. 
Loading ...
Dulu saya pernah nyari script seperti ini, dapet sih…tapi ya itu, cuma bisa copy paste, gak mudeng maksud scriptnya. setelah baca tulisan Pak Ari, ooo…ternyata begitu to!!!he…he…
Makasih Pak Ari (dulu gak Mau di panggil Pak Rosi
). sukses….
mas ku coab dtes kok ndak bsa y?
data di dropdown ke dua ga muncul
oia klo lbih dr dua gmn mas kombo boxnya?? and datanya dalam satu tabel…
to fajar: kalau gak bisa coba cek scriptnya lagi mas.. coba sesuaikan struktiur tabelnya, nama tabel, nama field. Kalau masih tetap gak bisa, coba download scriptnya di link yang saya sediakan di atas.
to mas yudi: sama2 mas…
to arif budiman: sama2 mas… tidak ada ruginya kan bergabung di member? He.. 3x
to pak ari..
saya baru di php pak…
saya memiliki case yang mirip dengan tutorial yang pa ari berikan…namun case saya mungkin adalah perluasan dari tutorial pa ari…
singkat saja ya pak…
setelah user memilih salah satu nama propinsi dari combo box pertama, maka secara otomatis pada combo box kedua memunculkan daftar pilihan nama-nama kabupaten yang terdapat pada propinsi terpilih. setelah itu ketika muncul pilihan nama-nama kabupaten pada combobox kedua, dan user memilih salah satu pilihan dari nama kabupaten muncullah data2 yang berhubungan dengan kabupaten seperti misal nama bupatinya, luas kabupatennya dan lain2 sebagainya berupa text secara otomatis..
yang ingin saya tanyakan adalah bagaimanakah cara untuk menampilkan data-data tersebut secara otomatis berdasarkan pilihan dari combobox yang kedua??
Mohon diberikan tutorialnya juga ya pak kalau memang ada….
heee….
Thanks…
BR,
Boy
emang rosihanari emang pinter tenan, aq yg koding aja mumet karena harus koding terus……
to endip: he.. 3x dinikmati saja mas…
Mas,mau nanya.. Aq kok habis milih combo box 1 nya, selected nya kok langsung kembali ke yang pertama yach??
Data yg di combo box 2 sich bener…