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

蒂波·德福马萨昂
大学
政治学

及

$（“#hd”）。单击（函数（）{
$（“.drop1”）。滑动切换（“慢速”）；
});

---

如果选择了第一个选项，如何显示第二个选择；如果选择了第一个下拉列表的第二个选项，如何隐藏第二个下拉列表？

您可以向第一个下拉列表添加更改事件处理程序，如下所示：

  $("#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”。

首先，您可以通过将

元素放入标签中稍微重新构造html。这样，您就不必为标签属性使用

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

演示：
@Matt Ball谢谢Matt。很好的解决方案。
<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>

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

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