Question

I have this code:

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

and

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

How to show the second select if the first select have the first option selected, and hide the second dropdown if the second option of the first dropdown is selected?

Answer 1

First, you can restructure the HTML a wee bit by putting the <select> elements inside the labels. That way you don’t have to use the for label attribute.

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

Then, use the .change() event:

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

Demo: http://jsfiddle.net/mattball/EaQea/