2011-05-27 139 views
2

我有这样的代码:切换DIV -jquery

<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> 

如何显示的第二选择,如果第一个选择有第一个选项选中,和隐藏第二个下拉如果第一个下拉菜单的第二个选项被选中?

回答

3

首先,您可以通过将<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/

+0

哇,很好的解决方案。谢谢@Matt – anvd 2011-05-27 01:35:18

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”。

+0

真丢脸!该jQuery代码可以更简洁。 – 2011-05-27 01:33:29

+0

@Matt球感谢马特。好的解决方案 – 2011-05-27 01:44:51

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