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

Мне нужно переключить div из выпадающего списка выбора. Мне бы хотелось, чтобы он был похож на asmselect для jquery, но вместо перечисления тега option мне бы хотелось, чтобы он отображал скрытый 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 ответа

Решение

Вы искали что-то подобное? 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 учебный класс.
  • Найти divs братья и сестры, которые имеют "есть" в имени класса. (Будет проще, если в меню не было родного брата.)
  • Скрыть ранее показанные братья с 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();
});​
Источник

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

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

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

Источник

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

    if($(this).val() == 'selected_option') {
        $('.selector1').show(); //displays element with display:none;        
    } else {
        $('.selector1').hide(); //hides element again
    }
Источник
Другие вопросы по тегам