Jquery : Show Hide Div menggunakan combo box

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

  1. Download jquery versi terakhir dan simpan dalam site direktori (terserah anda, dalam kasus saya, saya simpan file jquery di folder scripts).
  2. Buat sebuah combo box dengan id=menucombo. Selanjutnya tentukan value-nya dengan menekan tombol list value di property bar. Misal seperti ini
  3. Buat juga sebuah text area yang diapit tag div dengan id=area
  4. Buka source code view dan sisipkan script berikut di dalam tag <head>
  5. <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>
  6. 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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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

Iklan