jQuery bascule div sélectionnez l'option

Je suis dans le besoin d'alterner les divs à partir d'un menu déroulant, sélectionnez l'option à cocher. J'aimerais qu'il semblable à asmselect pour jquery, mais au lieu de l'inscription de l'option tag j'aimerais qu'il affiche un div caché. Est-il quelque chose comme cela? Ou quelqu'un sait comment le régler? Merci, Jeff.

Mis à JOUR

Fondamentalement, ce que je veux, c'est le regard et l'interaction de la asmselect lien ci-dessus si le basculement de divs au lieu de générer une liste. Exemple de code ci-dessous:

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

Pourriez-vous être un peu plus précis avec vos besoins? Je ne suis pas sûr que je suis en suivant ce que vous me demandez.
J'ai mis à jour le post.

OriginalL'auteur Jeffrey | 2010-05-04

Avez-vous été à la recherche de quelque chose de ce genre? 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"); });
});

Lorsque l'option sélectionner des changements, vous

Révéler sélectionnés div avec slideDown() et supprimer ses hidden classe.
Trouver le divs frères et sœurs qui ont "est" dans le nom de la classe. (Être plus facile si le menu n'était pas un frère ou une sœur.)
Cacher affiché auparavant frères et sœurs avec slideUp(), qui prend un rappel pour ajouter le hidden la classe après la slideUp() est complet

Voici un autre (à mon avis, la meilleure façon): http://jsfiddle.net/tYvQ8/1/

De vous débarrasser de votre hidden de classe, et l'utilisation de jQuery pour les cacher. Ensuite, vous n'avez pas à vous inquiéter au sujet de l'ajout et la suppression de la classe.

HTML sans classe caché

<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();
});

Les travaux de cette. Grazie!
Je suis maintenant à la recherche pour ajouter à cela, pour faire comme les asmselect plugin de sorte qu'il affiche plusieurs divs et de les désactiver sur le sélecteur. Des idées?

OriginalL'auteur user113716

2

Liste des options et des balises div peuvent être identifiés et basculé de la même façon.

$('#div_id').toggle();

Donc, au lieu d'utiliser un sélecteur d'élément pour sélectionner une option balise comme le asmselect plugin que vous l'avez mentionné utilise, modifiez l'élément sélecteur pour sélectionner une balise div dans la page.

Merci Jeremy. Je n'arrive pas à le faire fonctionner, vous pouvez prendre un coup d'oeil à mon code ci-dessus.
En fait, ce code semble bon et j'ai été capable de le faire fonctionner. Quelle est l'erreur que vous voyez? Ma seule suggestion aurait été de changer la ligne que vous définissez theDiv sur une chaîne au lieu d'un élément de l'objet. Par exemple: var theDiv = ".est" + valeur; de Cette façon, vous seriez en appelant $(theDiv) comme je l'aurais fait. Mais comme je l'ai dit, à votre façon, a très bien fonctionné pour moi. Afficher le message d'erreur et le navigateur que vous utilisez et peut-être que je peux offrir à une autre suggestion.
Il fonctionne sous mozilla pour moi, mais pas de webkit.
essayez de changer la valeur de theDiv et des essais sur webkit. Ma conjecture est que de la corriger. Je voudrais l'essayer pour vous, mais je n'ai pas accès à un navigateur webkit.

OriginalL'auteur Jeremy

Utilisation .modifier() comme mentionné précédemment, mais avec du jquery .show() et/ou .hide() méthodes:

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

OriginalL'auteur TomoMiha

Vous devez vous connecter pour publier un commentaire.