Choix différents dans un menu select en fonction d'un autre menu select
Soyez le premier à donner votre avis sur cette source.
Snippet vu 9 467 fois - Téléchargée 30 fois
Contenu du snippet
On choisit une option dans un premier menu et dans le second il nous affiche différentes options selon le choix.
Petite précision, entiérement compatible avec Firefox.
Petite précision, entiérement compatible avec Firefox.
Source / Exemple :
<!-- par HippyZ -- C'est un menu déroulant tout simple,
on choisit dans le premier une catégorie et il nous retourne dans le second différentes options. Il n'y a aucun rafraîchissement !!!-->
<html>
<head>
<title>Menu Déroulant</title>
<script language="JavaScript">
function trierMenuProduit(form,list,typeCategorie) // Création de la fonction qui va écrire les différentes options dans le second menu déroulant en fonction du choix effectué.
{ // Dans cette fonction on rabat le nom du formulaire , le nom du menu "select" et la "value" du choix que l'on a effectué.
list.options.length=0;// La remise à 0 des options du menu déroulant est trés importante autrement il "rajoutera" à chaque choix différent de nouvelles options.
// ici on commence les tests d'égalité avec la "value" retournée qui porte le nom de"typeCategorie".
if (typeCategorie == "composants")
{
choix=new Option("Séléctionnez un produit");// on crée une variable "choix" dans laquelle on va mettre une nouvelle option.
form.produit.options[form.produit.options.length]=choix;// ensuite on atteint le second menu déroulant que l'on va indexer avec notre nouvelle option "choix".
choix=new Option("Processeurs","processeurs");// Attention lors de la création de notre nouvelle option,
form.produit.options[form.produit.options.length]=choix;// ce que l'on écrit en premier es le texte que va afficher notre menu déroulant,
// le second est la "value" que celui-ci retournera. Et ainsi de suite.
choix=new Option("Cartes mères","meres");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Ventilateurs processeurs","ventilateurs proc");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Mémoires","memoires");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Cartes vidéo","video");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Cartes son","son");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Lecteurs de disquettes ","lecteurs");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Disques durs","disques");
form.produit.options[form.produit.options.length]=choix;
}
else if (typeCategorie == "boitiers")
{
choix=new Option("Séléctionnez un produit");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Alimentations","alimentations");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Boîtiers","boitiers");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Ventilateurs","ventilateurs");
form.produit.options[form.produit.options.length]=choix;
}
else if (typeCategorie == "graveurs")
{
choix=new Option("Séléctionnez un produit");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Lecteurs CD et DVD","DVD");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Graveurs CD et DVD","CDetDVD");
form.produit.options[form.produit.options.length]=choix;
}
else if (typeCategorie == "peripheriques")
{
choix=new Option("Séléctionnez un produit");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Réseaux","reseaux");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Ecrans","ecrans");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Claviers","claviers");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Souris","Souris");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Casques & Enceintes","casques");
form.produit.options[form.produit.options.length]=choix;
}
else if (typeCategorie == "consommables")
{
choix=new Option("Séléctionnez un produit");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("CD & DVD","cdvierge");
form.produit.options[form.produit.options.length]=choix;
}
else if (typeCategorie == "logiciels")
{
choix=new Option("Séléctionnez un produit");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Systémes d'exploitations","os");
form.produit.options[form.produit.options.length]=choix;
choix=new Option("Bureautique","bureautique");
form.produit.options[form.produit.options.length]=choix;
}
}
</script>
</head>
<body topmargin="0" leftmargin="0">
<form name="catalogue">
<table border="0" cellspacing="0" cellpadding="5" width="950" align="center" >
<tr>
<td align="right" bgcolor="#aacc7f" width="100">
<p>Catégorie</p>
</td>
<td align="left" bgcolor="#aacc7f" width="150">
<select name="categorie" onChange="trierMenuProduit(this.form,this.form.produit,this.value)"><!-- Appel de notre fonction avec toutes les infos (nom de formulaire, nom du second menu déroulant et la value). -->
<option>Sélectionnez</option>
<option value="composants">Composants</option>
<option value="boitiers">Boîtiers</option>
<option value="graveurs">Lecteurs et graveurs</option>
<option value="peripheriques">Périphériques</option>
<option value="consommables">Consommables</option>
<option value="logiciels">Logiciels</option>
</select>
</td>
<td align="right" bgcolor="#aacc7f"width="100">
<p>Produit</p>
</td>
<td align="left" bgcolor="#aacc7f">
<select name="produit" onChange="alert('Variable retournée : '+this.value)"><!-- Ici une simple "alert" qui retourne la value de notre choix. -->
<option>Sélectionnez une catégorie</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
A voir également
- Choix différents dans un menu select en fonction d'un autre menu select
- Menu en c - Forum C
- Menu php ✓ - Forum PHP
- Select sum ✓ - Forum SQL
- Select distinct ✓ - Forum SQL
- Select * from select - Forum SQL
15 juin 2005 à 08:39
bref c'est simple
moi j'aurai bien aimé qu'il soit compatible avec mozilla ou firefox
mais part ca, c'est bien joué
bonne continuation
15 juin 2005 à 13:18
Sinon c'est simple, et ca pourrat en aider certains.
25 juil. 2005 à 20:48
après plusieurs recherches sur le web, je semble enfin avoir trouvé ce que je voulais... juste une petite chose : un fois avoir cliqué sur une des catégories il faut ensuite cliquer sur un produit (jusque là pas de problème), en fait au lieu que ça m'ouvre une "fenêtre" je voudrais que ça me renvoi vers un lien...
Comment faire ????
D'avance merci
FARFADAM
26 oct. 2005 à 14:41
19 nov. 2005 à 13:38
si jamais t'as un souci explique moi ton code et ton pb j'essayerai d't'aider...
++
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.