Pseudo Mot de passe
fleche Inscription
fleche Mot de passe oublié ?
Informations Générales
Chargement en cours...
Nombre de Visites fleche [ 1 036 256 ]
Votre IP fleche [ 38.107.191.115 ]
Vous êtes ici : Home Page Dossiers Trucs et astuces (JavaScript) Listes deroulantes dynamiques
Imprimer le document Version Imprimable

Informations Générales

[425] Posts sur le forum
[453] Membres inscrits
Il y a en ligne :
arrow 0 Membre
arrow 5 Invités
fled Membre en ligne:
Aucun

Partenariat

Partenariat Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers.
Rendez-vous dans « Partenariat » pour en savoir plus.

Publicité


Prestataire

N°1 de l'hébergement, location de serveurs, nom de domaines et téléphonie.
(OVH est recommandé par Webelix.net)

www.

Nos Partenaires

Alsacreations
Dreamseed
L'éditeur JavaScript
DicoDuNet
Noogle
Tutopla.net

JavaScript - Listes déroulantes dynamiques

Auteur : 3L!X | Créé le : 01/11/2007 à 15H00

Voici comment créer des listes déroulantes (select) dynamiques.

Comme vous avez dû le constater sur certain formulaire, des listes peuvent interagir entre elles.
Exemple, en fonction d'une première sélection, une deuxième liste vous est proposé.

Un Exemple :

Pays : Ville :

Mise en place

Entre les balises <HEAD> et </HEAD> :

<script type="text/javascript">
// <![CDATA[
var list0 = new Array();
var list1 = new Array();
var list2 = new Array();

list0[0] = new Option();
list0[0].text = "-";
list0[0].value = null;

list1[0] = new Option();
list1[0].text = "Paris";
list1[0].value = "Paris";
list1[1] = new Option();
list1[1].text = "Lille";
list1[1].value = "Lille";
list1[2] = new Option();
list1[2].text = "Lyon";
list1[2].value = "Lyon";
list1[3] = new Option();
list1[3].text = "Toulouse";
list1[3].value = "Toulouse";
list1[4] = new Option();
list1[4].text = "Bordeaux";
list1[4].value = "Bordeaux";

list2[0] = new Option();
list2[0].text = "Madrid";
list2[0].value = "Madrid";
list2[1] = new Option();
list2[1].text = "Vigo";
list2[1].value = "Vigo";
list2[2] = new Option();
list2[2].text = "Andorra";
list2[2].value = "Andorra";
list2[3] = new Option();
list2[3].text = "Valencia";
list2[3].value = "Valencia";

function chgPays(form) {
	//Raz de la liste des options Ville
	for (i = 0; i < form.Ville.options.length*3; i++) {
		form.Ville.options.length--;}

	//Recherche de l'index de la selection Pays
	var pays = form.Pays.selectedIndex;
	switch(pays) {
		case 0:
			for (i = 0; i < list0.length*3; i++) {form.Ville.options[i] = list0[i];}
			break;
		case 1:
			for (i = 0; i < list1.length*3; i++) {form.Ville.options[i] = list1[i];}
			break;
		case 2:
			for (i = 0; i < list2.length*3; i++) {form.Ville.options[i] = list2[i];}
		break;
	}
}
// ]]>
</script>

Balise <BODY> :

Rien

Entre les balises <BODY> et </BODY> :

<form action="#" id="form">
<div>
	<span>Pays :</span>
	<select name="Pays" onchange="chgPays(this.form)">
		<option value="">-</option>
		<option>France</option>
		<option>Espagne</option>
	</select>
	<span>Ville :</span>
	<select name="Ville">
		<option value="">-</option>
	</select>
	<input type="submit" />
</div>
</form>

[0] commentaire - Voir/EditerAjout commentaire

Haut de page