CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 12:57:35

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Formulaire

> CHOIX DIFFÉRENTS DANS UN MENU SELECT EN FONCTION D'UN AUTRE MENU SELECT

CHOIX DIFFÉRENTS DANS UN MENU SELECT EN FONCTION D'UN AUTRE MENU SELECT

Information sur la source

Note :

8,40 / 10

Catégorie :Formulaire Niveau :Débutant Date de création :14/06/2005 Date de mise à jour :15/06/2005 09:25:32 Vu :6 663

Auteur : hippyz

Ecrire un message privé

Commentaire sur cette source (7)

Ajouter un commentaire et/ou une note

Description

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

<!-- 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)">
<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)">
<option>Sélectionnez une catégorie</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

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

Historique

15 juin 2005 09:25:32 :: Petite modif

Sources du même auteur

VOUS INDIQUE LE NOMBRE DE CARACTÈRES QU'IL VOUS RESTE À RENT...

PETITE FONCTION POUR FAIRE CLIGNOTER DU TEXTE

HOLOGE EN TEMPS RÉEL

CALCULATRICE SCIENTIFIQUE

Toutes les sources de hippyz

Sources de la même categorie

FORMULAIRE TABLEAU par vic511

FORMULAIRE DYNAMIQUE par Niidhogg

CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama

SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

Toutes les sources de la catégorie Formulaire

Commentaires et avis

Commentaire de darkman2 le 15/06/2005 08:39:42

ton script est tres simple tu t'es basé sur des choix multiples, a chaque fois qu'on choisi un catégorie,
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

Commentaire de Romain128 le 15/06/2005 13:18:39

Euh, ca marche sous Moz/FF, darkman2.
Sinon c'est simple, et ca pourrat en aider certains.

Commentaire de Farfadam le 25/07/2005 20:48:50

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

Commentaire de borami le 26/10/2005 14:41:25

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?

Commentaire de nulard007 le 19/11/2005 13:38:26

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...
++

Commentaire de cybervore le 27/02/2006 20:29:59

Peux tu m'envoyer un zip stp : mon adresse : cybervore@tiscali.fr merci!

Commentaire de KaiHo le 03/08/2010 14:48:35

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 !

Ajouter un commentaire

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP