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>

和

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

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

最佳答案

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

关于javascript - 切换div -jquery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6146859/