Listes déroulantes liées

**developeuz93** · 18/12/2008, 12h08

Bonjour,
Voila, j'ai mon formulaire avec huit listes déroulantes correspondant a des choix. L'utilisateur doit donc sélectionner des choix dans l'ordre de préférence.
J'aimerais que lorsque l'utilisateur sélectionne un choix dans la liste 1, ce choix disparaisse des listes suivantes, et ainsi de suite... Le problème est que je n'y connait pas grand chose en javascript

Voila ce que j'ai fait pour l'instant :
Code javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type='text/javascript'>
var tabCI = new Array("Monuments", "Musées", "Shopping", "Restaurants et cafés", "Ballades", "Parcs et jardins", "Bars et bistros", "Spectacles");
 
function change_liste(liste) 
{
	if(liste.options[liste.selectedIndex].value == 0) {
	} else {
		//On parcourt le tableau
		for(var i=0; i<=(tabCI.length-1); i++) {
			new_option = new Option(tabCI[i]);
			var id_suivant = parseInt(liste.id)+1;
			//alert(id_suivant);
			//On commence à partir de la liste suivante
			for(var j=id_suivant; j<=8; j++) {
				if(new_option.value==liste.options[liste.selectedIndex].text) {
				} else {
					document.form_inscription_touriste.elements["centre_interet"+id_suivant].options[i]=new_option;
				}
			}
		}
	}
}
</script>

Mon formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<form id="formulaire" name="form_inscription_touriste" method="post" action="">
 
	<select name="centre_interet1" id="1" onchange="change_liste(this);">
		<option value="0">Mon premier choix</option>
		<option value="1">Monuments</option>
		<option value="2">Musées</option>
		<option value="3">Shopping</option>
		<option value="4">Restaurants et cafés</option>
		<option value="5">Ballades</option>
		<option value="6">Parcs et jardins</option>
		<option value="7">Bars et bistros</option>
		<option value="8">Spectacles</option>
	</select>
	<br/><br/>
	<select name="centre_interet2" id="2" onchange="change_liste(this);">
		<option value="0">Mon deuxième choix</option>
	</select>
	<br/><br/>
	<select name="centre_interet3" id="3" onchange="change_liste(this);">
		<option value="0">Mon troisième choix</option>
	</select>
	<br/><br/>
	<select name="centre_interet4" id="4" onchange="change_liste(this);">
		<option value="0">Mon quatrième choix</option>
	</select>
	<br/><br/>
	<select name="centre_interet5" id="5" onchange="change_liste(this);">
		<option value="0">Mon cinquième choix</option>
	</select>
	<br/><br/>
	<select name="centre_interet6" id="6" onchange="change_liste(this);">
		<option value="0">Mon sixième choix</option>
	</select>
	<br/><br/>
	<select name="centre_interet7" id="7" onchange="change_liste(this);">
		<option value="0">Mon septième choix</option>
	</select>
	<br/><br/>
	<select name="centre_interet8" id="8" onchange="change_liste(this);">
		<option value="0">Mon huitième choix</option>
	</select>
</form>

J'ai l'impression que ce n'est pas du code "propre", et en plus ca ne fonctionne pas correctement. Si vous pouviez m'aider svp ce serait sympa, car je suis un peu ds le flou...
Merci bcp

**le_chomeur** · 18/12/2008, 12h13

et la fonction rechercher ????
cette méthode est épinglée en entete du forum !

http://www.developpez.net/forums/d59...s-liees-entre/

**developeuz93** · 18/12/2008, 13h56

Oui, j'ai bien vu, d'ailleurs je me suis inspirée de ce qui est proposé dans la FAQ.
Je voudrais juste qu'on me dise si ce que j'ai commencé a faire est bien, et si c le bon raisonnement svp.
Merci

**developeuz93** · 18/12/2008, 14h28

J'ai une petite question alors (surement bete, dsl!) :
Est-il possible en javascript de retirer une option d'un select??
Merci

**le_chomeur** · 18/12/2008, 14h47

oui

je te renvois sur cette discution :

http://www.developpez.net/forums/d37...nte-dynamique/

**Whombat** · 18/12/2008, 14h49

Dans le document "JS-DynamicSelect.css" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
 
* {
	font-size:8pt;
	font-family:verdana,sans-serif;
}
div.box {
	float:left;
	width:200px;
}
div.boxRight {
	float:left;
	width:300px;
}
div.dvLabel {
	float:left;
	margin-bottom:2px;
	margin-left:4px;
	margin-right:3px;
	margin-top:2px;
	text-align:left;
}
div.dvSelec {
	float:left;
}
select.inSelect {
	width: 150px;
    border: 1px none;
    font-family: Tahoma, Arial;
    font-size: 8pt
}

Dans le document "JS-DynamicSelect.js" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
 
// Déclaration du tableau associatif tRegionLink. La clé du tableau
// correspond aux valeurs de la liste déroulante slCountry
var tRegionLink = new Array;
// Remplissage du tableau. A la limite, on pourrait penser générer
// le contenu à partir de données externes via un script serveur
// (genre PHP ou Perl), ou encore à partir d'un fichier XML ou texte.
// Pour l'exemple, on code en dur le contenu.
tRegionLink["FR"] = new String("Département;Alpes Maritimes;Alsace;Paris;Var;Gers;Lozère;Tarn;Bretagne;Normandie;Corse");
tRegionLink["BE"] = new String("Province;Brabant;Luxembourg;Namur;Hainaut;Flandres Occidentales;Flandres Orientales;Limbourg;Anvers");

Dans le document "JS-DynamicSelect.htm" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>Listes déroulantes dynamiques</title>
	<link rel="stylesheet" type="text/css" href="JS-DynamicSelect.css">
	<script language="javascript" src="JS-DynamicSelect.js"></script>
	<script language="javascript">
	function setRegion(oSelect) {
		// Par défaut, la valeur de retour de l'event est mis à false.
		event.returnValue = false;
		// L'objectif est de charger la liste déroulante slRegion en
		// fonction de la valeur sélectionnée dans la liste déroulante
		// courante (identifiée par le paramètre oSelect). La liste
		// slRegion va être construite dynamiquement en utilisant le
		// tableau tCountyLink.
		if (oSelect != null) {
			// On vérifie que l'entrée dans tRegionLink existe pour la
			// valeur de oSelect.
			if (tRegionLink[oSelect.value] != undefined) {
				// L'entrée existe, on peut donc récupérer la chaine des 
				// régions et la convertir en tableau.
				var tRegions = new Array;
				tRegions = tRegionLink[oSelect.value].split(";");
				// Nous pouvons mettre à jour le titre pour les régions.
				var oLabel = document.all.lbRegion;
				if (oLabel != null) oLabel.innerText = tRegions[0] + ":";
				// On trie le tableau des régions, juste pour la frime,
				// après avoir supprimé la première entrée. L'idéal étant
				// d'avoir les éléments déjà trier dans la string :)
				tRegions.shift(); tRegions.sort();
				// Puis, construisons le contenu de la liste slRegion.
				var oRegions = document.all.slRegion;
				if (oRegions != null) {
					// D'abord, nous devons nettoyer la contenu actuel de
					// la liste slRegion.
					oRegions.innerHTML = "";
					// Ensuite, nous pouvons générer le nouveau contenu.
					for (cnt=0; cnt<tRegions.length; cnt++) {
						var oOption = document.createElement("OPTION");
						oRegions.options.add(oOption);
						oOption.innerText = tRegions[cnt];
						oOption.value = cnt;
					}
					// En théorie, tout s'est bien passé, donc fixons la
					// valeur de retour de l'event à true.
					event.returnValue = true;
				}
			}
		}
		// On désactive l'héritage de l'event.
		event.cancelBubble = true;
	}
	</script>
</head>
 
<body onload="setRegion(document.all.slCountry);">
	<div class="box">
		<div class="dvLabel" id="lbCountry">Pays:</div>
		<div class="dvSelec" id="dvCountry">
			<select id="slCountry" onchange="setRegion(this);" class="inSelect">
				<option value="BE">Belgique</option>
				<option value="FR">France</option>
			</select>
		</div>
	</div>
	<div class="boxRight">
		<div class="dvLabel" id="lbRegion"></div>
		<div class="dvSelec" id="dvRegion">
			<select id="slRegion" class="inSelect"></select>		
		</div>
	</div>
</body>
</html>

Cordialement.

**developeuz93** · 18/12/2008, 16h21

Merci bcp pour vos réponses.
J'ai trouvé quelques truc sur le net, mais ca ne gère que deux listes, donc c plutot simple a comprendre. Par contre, dès que j'essaye d'adapter avec mes 8 listes, ca devient très vite compliqué!!

Whombat, je ne comprend pas trop ton code, surtout que la sélection d'un pays ne change rien pour la liste des départements...

Listes déroulantes liées

JavaScript

Vue hybride

Discussions similaires

Partager

Partager