Cara Menggunakan Combo Box Select Pada PHP

Cara Menggunakan Combo Box Select Pada PHP

Ditulis oleh : M Toyib Hidayat

Combo box select adalah elemen form berbentuk kotak yang jika diklik akan menampilkan pilihan menu kebawah (drop down list). Combo box lebih efisien digunakan jika opsi pilihan relatif banyak. Dengan combo box form akan lebih ringkas karena hanya dibutuhkan satu baris area saja seperti input checkbox. Proses memilih pada combo box dilakukan dengan lebih dahulu menampilkan keseluruhan isi dengan cara meng-kllik combo box lalu memilih dengan meng-klik salah satu isi dari list combo box.

Cara membuat combo box select pada form

Berbeda dari elemen-elemen form sebelumnya yang menggunakan tag <input> tanpa penutup, kalau untuk membuat combo box menggunakan tag <select> dan ditutup dengan tag </select>. Untuk membuat daftar isi combo box menggunakan tag <option> dan tag penutup </option>.

Untuk mendefinisikan nama combo box menggunakan atribut name yang ditaruh pada tag <select>. Dan untuk mendefinisikan nilai/value sebuah opsi pilihan menggunakan atribut value yang ditaruh pada tag <option>. Jika ingin salah satu opsi di-select saat pertama kali load digunakan atribut selected pada tag <option>.

Sebenarnya jumlah opsi pada combo box minimal dua agar bisa dilakukan pilihan, namun pada penggunaan combo box dinamis yang mengkin saja memunculkan satu opsi saja maka opsi pada combo box bisa dibuat satu. Untuk jumlah opsi maksimal pada combo box belum saya ketahui, namun disarankan agar tidak membuat opsi yang terlalu banyak agar tidak membingungkan pengguna.

Penggunaan combo box select

Seperti disebutkan diatas bahwa combo box select digunakan untuk memilih satu opsi dari beberapa opsi pada form. Alasan menggunakan combo box dibandinginput radio button adalah untuk efisiensi tempat jika opsi yang dimunculkan relatif banyak.

Contoh penggunaan combo box adalah saat kita memilih negara asal ketika melakukan proses pendaftaran. Ada lagi contoh penggunaan combo box dinamis seperti saat memilih provinsi dan kabupaten di website kpu ketika kita mengecek nama kita pada DPT pemilu kemarin.

Ada sedikit perbedaan antara combo box yang digunakan pada form PHP dengan combo box pada visual basic yaitu tidak bisa mengetik teks pada combo box. Jika menginginkan hal itu maka harus digunakan komponen yang dibuat sendiri.

Menentukan nilai dari combo box select

Nilai combo box ditentukan dengan atribut value pada tag <option>. Nilai combo box berupa string dan dalam penulisannya harus diapit tanda petik. Salah satu alasan menggunakan combo box adalah nilai-nilai yang akan dimasukkan oleh pengguna sudah diketahui, jadi pengguna tidak salah ketik dalam memasukkan data.

Mengambil nilai dari combo box select

Cara mengambil nilai dari combo box seperti saat mengambil nilai dari input text. Opsi yang dipilih otomatis menjadi nilai balikan sebuah combo box. Saat combo box di load secara otomatis akan memilih opsi yang ditulis paling atas kecuali pada opsi lain ditentukan dengan atribut selected.

Contoh penggunaan combo box select pada PHP

Membuat combo box select pada form 

view plainprint?

1. <form action="" method="post">     
2. <select name="buah">    
3. <option value="">Silahkan Pilih</option>    
4. <option value="Apel">Apel</option>    
5. <option value="Jeruk">Jeruk</option>    
6. <option value="Semangka">Semangka</option>    
7. <option value="Salak">Salak</option>    
8. </select>     
9. <input type="submit" name="enter" value="Enter">     
10. </form>     

Tampilan form diatas pada browser
 Silahkan Pilih Apel Jeruk Semangka Salak   

Membuat script untuk menangani combo box

view plainprint?

1. <?php     
2. if(isset($_POST['enter']))     
3. {     
4.  if(emptyempty($_POST['buah']))    
5.  {    
6.  echo "Anda belum memilih!";    
7.  }    
8.  else echo "Pilihan anda: ".$_POST['buah'];    
9. }     
10. ?>    

Penjelasan script

Pada form terdapat satu combo box dengan atribut name=buah. Pada combo box tersebut terdapat empat list pilihan nama buah dan satu pilihan kosong yang ditaruh paling atas dengan label "Silahkan pilih". Tujuan dari pilihan kosong ini adalah mencegah pengambilan data jika pengguna belum memilih sekaligus pemberitahuan untuk mempersilahkan memilih. Masing-masing pilihan memiliki value dan label yang berbeda, yaitu Apel, Jeruk, Semangka dan Salak.

Untuk mengambil value dari combo box select digunakan cara seperti saat mengambil value dari input text. Value yang dihasilkan oleh combo box adalah value dari opsi yang dipilih. Pada script dibuat setelah deteksi tombol enter ditekan akan mengecek value dari combo box select buah. Jika value kosong (empty) artinya combo box select belum dipilih (masih tampil "Silahkan pilih"). Dan jika value tidak kosong akan ditampilkan value dari combo box select.