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

您可以在第一个下拉列表中添加一个on change事件处理程序，如下所示：

  $("#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");
    });