Discussion :

[developeuz93]

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]

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

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

[developeuz93]

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]

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

[le_chomeur]

oui

je te renvois sur cette discution :

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

[Whombat]

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]

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

[le_chomeur]

pour les listes déroulante liées :

- comment récupères tu les données de la liste suivante ?

sinon :

- sur le click de la première liste :
-- récupération des données + alimentation de la suivante

sur la seconde idem donc le code source doit ressembler à ça :

Code :

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

1
2
3
4
5
6
7
 
function alimentSelect(valeurListeClick,ListeCible){
...
récupération donnée en fonction de la valeur
...
Alimentation de la ListeCible
}

voila pour l'algo

si tu as un souçis avec le remplissage montre moi comment tu récupères tes informations ( il y a encore une subtilité dans le cas ou tu as X liste et que tu sélectionnes un élément dans une du milieu , il faut masquer / vider celle qui suivent ....

[developeuz93]

Ok merci!
Je vais tester avec ta méthode, et je reviendrais vers toi si g des soucis
Mais j'avoue que j'ai la tete qui va exploser, le javascript c vraiment pas mon truc!!

[developeuz93]

Bonjour,
Finalement je me suis tournée vers Ajax, ca me semble moins compliqué!
J'ai donc repris le code du tuto Ajax, ca fonctionne, mais que pour la 1ère liste... Donc je choisis une valeur dans la liste 1, la liste 2 se remplit avec les bonne valeurs, mais si je continue avec la liste 2, ca ne fait rien pour la liste 3... J'ai regardé la console d'erreurs, et ca me met "Une chaine vide a été transmise à getElementById()", il ne reconnait donc pas un élèment, mais je ne sais pas lequel, car ca n'indique pas la ligne.

Voici mon 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
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
<script type='text/javascript'>
		function getXhr(){
			var xhr = null; 
			if(window.XMLHttpRequest) // Firefox et autres
			   xhr = new XMLHttpRequest(); 
			else if(window.ActiveXObject){ // Internet Explorer 
			   try {
						xhr = new ActiveXObject("Msxml2.XMLHTTP");
					} catch (e) {
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
			}
			else { // XMLHttpRequest non supporté par le navigateur 
			   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			   xhr = false; 
			} 
			return xhr;
		}
 
		/**
		* Méthode qui sera appelée sur le click d'une liste déroulante
		**/
		function go(id_liste){
			alert("id de la liste = " + id_liste);
			var xhr = getXhr();
			// On défini ce qu'on va faire quand on aura la réponse
			xhr.onreadystatechange = function(){
				// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
				if(xhr.readyState == 4 && xhr.status == 200){
					leselect = xhr.responseText;
					// On se sert de innerHTML pour rajouter les options a la liste
					id_liste_suivante = parseInt(id_liste)+1;
					alert("liste suivante = "+id_liste_suivante);
					document.getElementById('ci'+id_liste_suivante).innerHTML = leselect;
 
				}
			}
 
			// Ici on va voir comment faire du post
			xhr.open("POST","ajaxListe.asp",true);
			// ne pas oublier ça pour le post
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			// ne pas oublier de poster les arguments
			// ici, l'id de la liste de la liste sélectionnée
			sel = document.getElementById(id_liste);
			//alert("valeur liste sélectionné = "+sel.value);
			ci_selectionne = sel.options[sel.selectedIndex].value;
			alert("id ci sélectionné = "+ci_selectionne);
			id_liste_suivante = parseInt(id_liste)+1;
			xhr.send("id_ci="+ci_selectionne+"&id_liste="+id_liste_suivante);
		}
 
	</script>

HTML :

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
<div id="ci1">
<select name="centre_interet1" id="1" onchange="go(this.id);">
	<option value="0">Mon premier choix</option>
	<%
	req = "SELECT * FROM CENTRE_INTERET ORDER BY id_centre_interet"
	Set rs = Server.CreateObject("ADODB.Recordset")
	rs.Open req, cnx
	While not rs.eof
		If strcomp(rs("id_centre_interet"), Request.Form("centre_interet1")) = 0 then
			Response.Write "<option value=""" & rs("id_centre_interet") & """ selected = ""selected"">" & trim(rs("libelle_centre_interet")) & "</option>"
		Else
			Response.Write "<option value=""" & rs("id_centre_interet") & """>" & trim(rs("libelle_centre_interet")) & "</option>"
		End if
		rs.MoveNext
	Wend
	rs.Close
	Set rs = Nothing
	%>
</select>
</div>
 
<div id='ci2'>
<select name="centre_interet2" id="2" onchange="go(this.id);">
	<option value="0">Mon deuxième choix</option>
</select>
</div>
 
<div id="ci3">
<select name="centre_interet3" id="3" onchange="go(this.id);">
	<option value="0">Mon troisième choix</option>
</select>
</div>
 
<div id="ci4">
<select name="centre_interet4" id="4" onchange="go(this.id);">
	<option value="0">Mon quatrième choix</option>
</select>
</div>
 
<div id="ci5">
<select name="centre_interet5" id="5" onchange="go(this.id);">
	<option value="0">Mon cinquième choix</option>
</select>
</div>
 
<div id="ci6">
<select name="centre_interet6" id="6" onchange="go(this.id);">
	<option value="0">Mon sixième choix</option>
</select>
</div>
 
<div id="ci7">
<select name="centre_interet7" id="7" onchange="go(this.id);">
	<option value="0">Mon septième choix</option>
</select>
</div>
 
<div id="ci8">
<select name="centre_interet8" id="8" onchange="go(this.id);">
	<option value="0">Mon huitième choix</option>
</select>
</div>

Ma page ajaxListe.asp :

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
<%
Response.Write "<select name='centre_interet"& Request.Form("id_liste") &"'>"
Response.Write "<option value='0'>Mon " & num_liste & " choix</option>"
if Request.Form("id_ci")<>"" then
	req="SELECT * FROM CENTRE_INTERET WHERE id_centre_interet<>" & Request.Form("id_ci") & " ORDER BY id_centre_interet"
	Set rs = Server.CreateObject("ADODB.Recordset")
	rs.Open req, cnx
	While Not rs.EOF
		Response.Write "<option value='" & rs("id_centre_interet") & "'>" & rs("libelle_centre_interet") & "</option>"
		rs.MoveNext
	Wend
else
	Response.Write "<option>ok--"& request.querystring("id_ci") &"--</option>"
end if
Response.Write "</select>"
%>

Si quelqu'un pouvait m'aider en me disant ce qui ne va pas, merci!!!!

[E.Bzz]

(Re)Bonjour,

Code :

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

sel = document.getElementById(id_liste);

tu ne donnes pas d'ID à tes select générés via Ajax ...
Tu ne récupères donc pas la value du 2° (pour générer le 3°).

A+

[developeuz93]

Merci, c ca!!!
J'aurais pu y rester des heures encore sans m'en rendre compte

Merci bcp