Блог

У меня есть этот код:

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

Как показать второй выбор, если в первом выборе выбран первый вариант, и скрыть второй выпадающий список, если выбран второй вариант первого выпадающего списка?

Во-первых, вы можете немного реструктурировать HTML, поместив <select> элементы внутри меток. Таким образом, вам не нужно использовать for атрибут label.

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

Вы можете добавить обработчик события при изменении в первый выпадающий список следующим образом:

   $("#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».

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