Tulisan kali ini akan mengulas mengenai Jquery. Pada dasarnya saya tidak mahir tentang jquery, hanya end user saja. Ada banyak sekali teknik yang terkait dengan show/hide sebuah tag div menggunakan jquery, tetapi setelah 2 hari surving ternyata belum menemui jawaban memuaskan untuk show/hide tag div dengan trigger dari combo box, sehingga dengan sedikit trial error, akhirnya bisa juga 
Seperti biasa saya gunakan editor kesayangan dreamweaver, langkahnya
- Download jquery versi terakhir dan simpan dalam site direktori (terserah anda, dalam kasus saya, saya simpan file jquery di folder scripts).
- Buat sebuah combo box dengan id=menucombo. Selanjutnya tentukan value-nya dengan menekan tombol list value di property bar. Misal seperti ini
- Buat juga sebuah text area yang diapit tag div dengan id=area
- Buka source code view dan sisipkan script berikut di dalam tag <head>
- <script src=”../scripts/jquery-1.4.4.min.js”></script>
<script>
$(document).ready(function() {
$(“#area”).css(“display”,”none”);
$(“select#menucombo”).click(function() {
if($(this).val() !== “tampil”){
$(“#area”).hide(“slow”);
}else{
$(“#area”).show(“slow”);
}
});
});</script> - Selesai
Keterangan
$(“#area”).css(“display”,”none”); –> mengkondisikan textarea yang diapit tag div id=area untuk tidak ditampilkan.
$(“select#menucombo”).click(function() –> aktivasi perintah di menu combo box terjadi bila ada pemilihan dan trigger “click”
if($(this).val() !== “tampil”){
$(“#area”).hide(“slow”);
}else{
$(“#area”).show(“slow”);
}
–> menjelaskan bahwa jika value dari combo box TIDAK memiliki nilai “tampil” maka tag div id=area disembunyikan, bila tidak maka tag div id=area ditampilkan
Kode selengkapnya seperti ini
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<script src=”../scripts/jquery-1.4.4.min.js”></script>
<script>
$(document).ready(function() {
$(“#area”).css(“display”,”none”);
$(“select#menucombo”).click(function() {
if($(this).val() !== “tampil”){
$(“#area”).hide(“slow”);
}else{
$(“#area”).show(“slow”);
}
});
});
</script>
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=”">
<select name=”menucombo” id=”menucombo”>
<option selected=”selected”>–pilih–</option>
<option value=”tampil”>tampil</option>
<option value=”hilang”>hilang</option>
</select>
<br />
<textarea name=”area” id=”area”></textarea>
</form>
</body>
</html>
Mudah-mudahan yang sedikit ini bermanfaat. Thx
