переключить div -jquery - PullRequest
Новая
       3

переключить div -jquery

2 голосов
/ 27 мая 2011

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

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

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

Ответы [ 3 ]

3 голосов
/ 27 мая 2011

Во-первых, вы можете немного изменить структуру HTML, поместив элементы <select> внутри меток.Таким образом, вам не нужно использовать атрибут метки 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);
});

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

2 голосов
/ 27 мая 2011

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

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

1 голос
/ 27 мая 2011 
$("select[name='escol']").change(function () { 
      $("#showHide").parent()['slide'+((this.value==2)?'Up':'Down')]("slow");
    });
...