Membuat Pilihan Combobox Dinamis Tanpa AJAX

Sharing is caring!

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&#91;'idProp'&#93;."'>".$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&#91;'idProp'&#93;."'>".$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&#91;'idProp'&#93;;

   // 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&#91;'idKab'&#93;."'>".$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&#91;'idProp'&#93;;

   // 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&#91;'idKab'&#93;."'>".$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&#91;'idProp'&#93;."'>".$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

Photobucket

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.

Tinggalkan Komentar