切換DIV -jquery

Question

我有這樣的代碼：

<div> 
    <label id="hd" for="escol"">text</label> <select name="escol" 
     class="drop"> 
     <option value="1" class="dr">show</option> 
     <option value="2" class="dr">hide</option> 

    </select> 
</div> 


<div> 
    <label id ="showHide" for="type"">Tipo de formação</label> <select name="area" 
     class="drop1"> 
     <option value="1" class="dr">Universidade</option> 
     <option value="2" class="dr">Politécnico</option> 
    </select> 
</div> 

和

<script> 
    $("#hd").click(function() { 
     $(".drop1").slideToggle("slow"); 
    }); 
</script> 

如何顯示的第二選擇，如果第一個選擇有第一個選項選中，和隱藏第二個下拉如果第一個下拉菜單的第二個選項被選中？

Answer 1

首先，您可以通過將<select>元素放置在標籤中來稍微重構HTML。這樣您就不必使用for標籤屬性。

<div> 
    <label id="hd"> 
     text 
     <select name="escol" class="drop"> 
      <option value="1" class="dr">show</option> 
       <option value="2" class="dr">hide</option>  
     </select> 
    </label> 
</div> 


<div> 
    <label id="showHide"> 
     Tipo de formação 
     <select name="area" class="drop1"> 
      <option value="1" class="dr">Universidade</option> 
      <option value="2" class="dr">Politécnico</option> 
     </select> 
    </label> 
</div> 

然後，使用.change()事件：

$('#hd > select').change(function() 
{ 
    $('#showHide > select').toggle(this.selectedIndex === 0); 
}); 

演示：http://jsfiddle.net/mattball/EaQea/

Answer 2

你可以改變事件處理程序下來添加到首次下降這樣的：

$("#escol").change(function(){ 
    if($(this).val() == "1"){ 
     $("#area").show(); 
    }else{ 
     $("#area").hide(); 
    } 
}); 

，改變你的HTML這樣的：

<div> 
    <label id="hd" for="escol">text</label> <select id="escol" 
     class="drop"> 
     <option value="1" class="dr">show</option> 
     <option value="2" class="dr">hide</option> 

    </select> 
</div> 


<div> 
    <label id ="showHide" for="type">Tipo de formação</label> <select id="area" 
     class="drop1"> 
     <option value="1" class="dr">Universidade</option> 
     <option value="2" class="dr">Politécnico</option> 
    </select> 
</div> 

請注意，您有一些額外的雙引號你刪除了我的html，並將name =「area」改爲id =「area」，name =「escol」改爲id =「escol」。

Answer 3

$("select[name='escol']").change(function() { 
     $("#showHide").parent()['slide'+((this.value==2)?'Up':'Down')]("slow"); 
    });