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 8 485 fois - Téléchargée 28 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.

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

Ajouter un commentaire

Commentaires

Messages postés
17
Date d'inscription
mercredi 27 août 2003
Statut
Membre
Dernière intervention
28 décembre 2010

Zut alors !

Il n'y a pas longtemps que je me suis mis au javascript, et avec ce genre de script, c'est véritablement facile. Adaptable, compatible avec FF, que du bonheur !

Merci beaucoup !
Messages postés
13
Date d'inscription
mercredi 15 décembre 2004
Statut
Membre
Dernière intervention
3 mai 2006

Peux tu m'envoyer un zip stp : mon adresse : cybervore@tiscali.fr merci!
Messages postés
8
Date d'inscription
jeudi 5 mai 2005
Statut
Membre
Dernière intervention
19 novembre 2005

salut tout l'monde, j'viens enfin d'trouver mon bonheur ;) merci bcp... il est super l'code. Et pour t'a question Borami, bah, ouais c'est c'que j'fais.. mais j'avais du mal avec le javascript...
si jamais t'as un souci explique moi ton code et ton pb j'essayerai d't'aider...
++
Messages postés
1
Date d'inscription
lundi 4 août 2003
Statut
Membre
Dernière intervention
26 octobre 2005

Bonjour, je cherche une fonction comme celle-ci mais avec des valeurs issuent d'une base de données MYSQL pour les deux menus déroulant. Est-ce que c'est faisable?
Messages postés
46
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
14 mai 2008

Bonjour,
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
Afficher les 7 commentaires

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.