JQuery переключить div из выбора варианта - PullRequest
Новая
       22

JQuery переключить div из выбора варианта

4 голосов
/ 04 мая 2010

Мне нужно переключить div из выпадающего списка выбора. Мне бы хотелось, чтобы он был похож на asmselect для jquery, но вместо перечисления тега параметра мне бы хотелось, чтобы он отображал скрытый div. Есть ли что-нибудь подобное? Или кто-нибудь знает, как его настроить? Спасибо, Джефф.

ОБНОВЛЕНО

По сути, мне нужен внешний вид и взаимодействие по ссылке asmselect, приведенной выше, хотя переключение div вместо генерации списка. Пример кода ниже: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery1.3.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $("#theSelect").change(function(){          
        $("#theSelect option:selected").click(function(){
            var value = $(this).val();
            var theDiv = $(".is" + value);

            $(theDiv).toggle(function(){
                $(this).removeClass("hidden");
            }),function(){
                $(this).addClass("hidden");
            }
        }); 
    });

});

</script>
<style type="text/css">
.hidden {
    display: none;
}
</style>
</head>

<body>
    <div class="selectContainer">
        <select id="theSelect">
            <option value="">- Select -</option>
            <option value="Patient">Patient</option>
            <option value="Physician">Physician</option>
            <option value="Nurse">Nurse</option>
        </select>
    </div>
    <div class="hidden isPatient">Patient</div>
    <div class="hidden isPhysician">Physician</div>
    <div class="hidden isNurse">Nurse</div>
</body>
</html>

Ответы [ 3 ]

6 голосов
/ 14 мая 2010

Вы искали что-то подобное? http://jsfiddle.net/tYvQ8/

$("#theSelect").change(function() {          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown().removeClass("hidden");
    theDiv.siblings('[class*=is]').slideUp(function() { $(this).addClass("hidden"); });
});​

Когда изменяется опция выбора, вы

  • Откройте выделенный div с помощью slideDown() и удалите его hidden класс.
  • Найдите братьев и сестер div, которые имеют "is" в имени класса. (Будет проще, если в меню нет брата или сестры.)
  • Скрыть ранее показанные братья и сестры с помощью slideUp(), который принимает обратный вызов для добавления класса hidden после завершения slideUp()

Вот еще один (на мой взгляд, лучше) способ: http://jsfiddle.net/tYvQ8/1/

Избавьтесь от своего hidden класса и используйте jQuery, чтобы скрыть их. Тогда вам не нужно беспокоиться о добавлении и удалении класса.

HTML без скрытого класса 

<body>
    <div class="selectContainer">
        <select id="theSelect">
            <option value="">- Select -</option>
            <option value="Patient">Patient</option>
            <option value="Physician">Physician</option>
            <option value="Nurse">Nurse</option>
        </select>
    </div>
    <div class="isPatient">Patient</div>
    <div class="isPhysician">Physician</div>
    <div class="isNurse">Nurse</div>
</body>​

JQuery 

$('[class^=is]').hide();

$("#theSelect").change(function(){          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown();
    theDiv.siblings('[class^=is]').slideUp();
});​
2 голосов
/ 04 мая 2010

Параметры списка и теги div можно идентифицировать и переключать одинаково.

$ ( '# div_id') переключения ();.

Таким образом, вместо использования селектора элементов для выбора тега параметра, такого как используемый вами плагин asmselect, просто измените селектор элемента, чтобы выбрать тег div на странице.

0 голосов
/ 17 июня 2017

Используйте .change (), как упоминалось ранее, но с методами jquery .show () и / или .hide (): 

    if($(this).val() == 'selected_option') {
        $('.selector1').show(); //displays element with display:none;        
    } else {
        $('.selector1').hide(); //hides element again
    }
...