Choix différents dans un menu select en fonction d'un autre menu select

Commenter

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

S'inscrire maintenant

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.

Du même auteur (hippyz)