jQuery - Selectbox a göre div gösterimi?

04-04-2010, 02:43:19

Merhaba,

Jquery kütüphanesini kullanarak selectbox a göre div göstermek istedim ama nerede hata yapıyorum bu konuda bilgili arkadaş yardımcı olursa çok sevinirim..

<script type="text/javascript">

$(document).ready(function(){
if ($("select[name=flight]").val() === '1'){
		$("#div_name").show(1000);
}

else {
$("#div_name").hide(1000);
}
}
});
</script>

</head>

<body>

<form id="form1" name="form1" method="post" action="">
  <label>
    <select name="flight" id="flight">
      <option value="0" selected="selected">No</option>
      <option value="1">Yes</option>
    </select>
  </label>
</form>

    <div id="div_name" style="display:none;">Some text in div.</div>
</body>
</html>

05-04-2010, 00:08:14

#2

celalettin1286

Aşağıda kod örnektir. İsteğiniz bu sanırım nerede kullanacaksanız ona göre değiştirirsiniz.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $.divliste = {
    '0' : $([]),
    '1div' : $('#1div'),
    '2div' : $('#1div, #2div'),
    '3div' : $('#3div')
  };

  $('#divsecici').change(function() {
    // hide all
    $.each($.divliste, function() { this.hide(); });
    // show current
    $.divliste[$(this).val()].show();
  });
});

</script>

<select id="divsecici">
   <option value="0">-- div seç --</option>       
   <option value="1div">1. div</option>
   <option value="2div">1. ile 2. divdiv</option>
   <option value="3div">3. div</option>
</select>

<div id="1div" style="display: none;">
1. div
</div>
<div id="2div" style="display: none;">
2. div
</div>
<div id="3div" style="display: none;">
3.div
</div>

05-04-2010, 01:00:15

#3

Bodrum

Aslında merak ettiğim hatayı nerede yaptığım idi ama çok teşekkür ederim gönderdiğin kodlarla sorunumu çözdüm..

05-04-2010, 15:16:17

#4

User99

Bodrum adlı üyeden alıntı: mesajı görüntüle

Aslında merak ettiğim hatayı nerede yaptığım idi ama çok teşekkür ederim gönderdiğin kodlarla sorunumu çözdüm..

$(document).ready(function(){
if ($("select[name=flight]").val() === '1'){
		$("#div_name").show(1000);
}

else {
$("#div_name").hide(1000);
}
}
});

Buradaki kod sadece bir kere (belge yüklenince) çalışıyor. Yani kullanıcı "select" nesnesinden seçim yapınca bu kontrol kodu çalışmıyor. Bu nedenle "select" dosyasının "change" olayına bu kodu atayınca çalışacağını düşünüyorum. Zaten arkadaşta kodu vermiş.

Birde javaskop ile yapalım

Çalışır Örnek

$$().HazirMi(function() {
    $$('#flight').OlayEkle('change', function() {
        $$('#div1, #div2, #div3').CSS('display', 'none');
        var Hangisi = $$(this).Deger();
        $$(Hangisi).CSS('display', block').Solgunluk(false); // Animasyon kaldırılabilir...
    });
});