Afficher/Masquer les différentes formes basé sur une option sélectionnée
Je voudrais savoir comment faire pour afficher/masquer des formes différentes en fonction d'un formulaire de sélection.
Dans l'exemple de code ci-dessous toutes les trois formes sont automatiquement mis en display:none. Je voudrais seulement montrer l'un des "caché" des formes si sa valeur correspondante est sélectionnée à partir de la "douche". Donc, si l'option "formule 1" est sélectionné à partir de la "douche", puis afficher le Formulaire 1 ci-dessous; si l'option "2" est sélectionné à partir de la "douche", puis afficher le Formulaire 2, et ainsi de suite.
De préférence avec un fade in/out de l'animation ou de l'autre de la lumière de l'animation.
Voici un échantillon...
<form id="form-shower">
<select>
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>
<form name="form_name1" id="form_1" style="display:none">
<!---- THIS IS FORM 1---->
</form>
<form name="form_name2" id="form_2" style="display:none">
<!---- THIS IS FORM 2---->
</form>
<form name="form_name3" id="form_3" style="display:none">
<!---- THIS IS FORM 3---->
</form>
Merci pour toute aide à ce sujet.
OriginalL'auteur gdinari | 2012-08-14
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser jQuery pour vous aider avec elle :
J'ai ajouté un id à votre de sélectionner et de modifier le nom de l'id de vos trois formes 🙂
Espère que cela aide 🙂
OriginalL'auteur Simon
JS:
De l'échantillon à
http://jsfiddle.net/dfYAs/
OriginalL'auteur Roger Medeiros
juste ajouter ceci à la fin de l'HTML
OriginalL'auteur Taha Rehman Siddiqui
Si vous ne souhaitez pas utiliser jQuery, vous pouvez les ajouter en haut de votre code HTML:
puis ajouter
onchange="changeForm(this)
à votre formulaire principal.Ha, je pense que cela pourrait être utile hein? On dirait que vous eu la réponse, mais je vais régler la mine dans le cas où vous avez besoin d'un jQuery-moins de réponse.
OriginalL'auteur RocketDonkey
faire ce
créer la fonction javascript qui aident u avec cette œuvre, quelque chose comme ce
fonction de la FFF(){
var opc = document.getElementById("formulaire-douche").valeur;
switch(opc)
{
'form_name1':
document.getElementById ("form_1').style.display = "block"; //ou en ligne, ou absolument aucun
break;
}
}
Créer un événement
OriginalL'auteur Carlos Alberto Blanco Vivas
Pour les futurs lecteurs, cette installation permettra d'afficher/masquer les formes de façon dynamique avec pas de bibliothèques externes:
Ensuite le code html:
OriginalL'auteur Nathan Calvank