Discussion :

[Aloam]

Bonjour à tous !

Cela fait maintenant quelques jours que je souhaite lier deux Selects uniquement à l'aide de javascript sans connexion serveur.

-> Pour faire simple, j'ai un premier Select qui permet de choisir une région.
En fonction du choix effectué, le second affichera les départements de la région sélectionnée...

Voici mon idée de script :

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
<select name="regions" id="re" onchange="dep();">
 
 
<option value="reset">->Choisissez une région<-</option>
<option value="Alsace">Alsace</option>
.....
 
 
</select>
 
 
<script type="text/javascript">
 
	function dep() {
 
		var dep = document.getElementById('re');
 
 
		if (dep.value == "Alsace")
 
			{
 
			document.getElementById('dep').options[1] = new Option('Bas-Rhin');
			document.getElementById('dep').options[2] = new Option('Haut-Rhin');
 
			}
 
		if (dep.value == "Aquitaine")
 
			{
 
			document.getElementById('dep').options[1] = new Option('Dordogne');
 
 
			} ....
}
</script>
 
 
<select name="selectdpt" id="dep">
 
 
<option value="reset"<?php if ($_POST['selectdpt'] == "reset") { echo "selected='selected'";}?>>->Choisissez un département<-</option>
// S'affiche ici les options supplémentaires...
 
 
</select>

Ce script fonctionne mais je me demande s'il est possible de faire mieux...Qu'en pensez-vous ?

[Mell]

Peut être en passant par un tableau à plusieurs dimensions

[Aloam]

Donc je pourrai pour chaque régions établir un array avec les départements correspondants ?

[Mell]

Je vois pas pourquoi ça ne fonctionnerais pas
Essai tu verras bien.

[Aloam]

Je test ça et je reviens

[Aloam]

Voila j'ai testé mais ça ne fonctionne pas, j'ai du me planter quelque part...

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
 
 
<script type="text/javascript">
 
var ok = new Array ("Bas-Rhin","Haut-Rhin");
 
	function departement() {
 
		var dep = document.getElementById('re');
 
 
		if (dep.value == "Alsace")
 
			{
 
			for (i=0; i<ok.length; i++)
 
				{
 
				document.getElementById('dep').options[i].value = ok[i];
				document.getElementById('dep').options[i].text  = ok[i];
 
 
				}
 
			}
</script>

[andry.aime]

Bonjour,

Listes déroulantes liées entre elles.

A+.

[Aloam]

Merci pour le lien
Mais je voudrai juste savoir ce qui ne va pas (selon vous) dans mon script.. je sais j'insiste mais je pense vraiment ne pas être loin de la solution !

[Bovino]

Code html :

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

<select name="regions" id="re" onchange="dep();">

Code :

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

document.getElementById('dep')

[andry.aime]

D'abord, il te manque un guillemet fermant de la fonction. Ensuite

Code :

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

1
2
3
4
5
6
7
8
9
10
11
if (dep.value == "Alsace")
 
			{
 document.getElementById('dep').options.length = 0;
			for (i=0; i<ok.length; i++)
 
				{
 				document.getElementById('dep').options[i] = new Option(ok[i],ok[i]);
				}
 
			}

Vérifie les id comme Bovino l'a indiqué.

A+.

[Aloam]

Oui désolé pour la guillemet, j'ai retapé trop rapidement le code de ma page qui lui est correct
Je ne savais pas que c'était une erreur car ma fonction dep() est exécutée lors du onchange sur le 1er select puis cette fonction se charge d'insérer dans mon second select id="dep" les nouvelles options par l'intermédiaire de ma boucle

Code :

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

document.getElementById('dep').options.length = 0;

Si j'ai bien compris ce code permet d'initialiser le nombre des options du select afin de pouvoir insérer sans problème les nouvelles options quel que sois leurs nombres ?

[andry.aime]

Code :

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

1
2
3
 
 
document.getElementById('dep').options.length = 0;

Si j'ai bien compris ce code permet d'initialiser le nombre des options du select afin de pouvoir insérer sans problème les nouvelles options quel que sois leurs nombres ?

oui.

[Aloam]

Parfait merci à vous je test ca

[Aloam]

Voila le script fonctionne bien !

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
 
<script type="text/javascript">
 
var ok = new Array("Bas-Rhin","Haut-Rhin");
 
	function departement() {
 
 
		var dep = document.getElementById('re');
 
 
 
		if (dep.value == "Alsace")
 
 
			{
 
	document.getElementById('dep').options.length = 0;
 
			for (i=0; i<ok.length; i++)
 
				{
 
				document.getElementById('dep').options[i] = new Option(ok[i],ok[i]);
 
 
				}
 
 
			}
            }
 
</script>

Seul problème, l'unique option déjà présente dans mon second Select n’apparaît pas ..

[NoSmoking]

Bonsoir,

Seul problème, l'unique option déjà présente dans mon second Select n’apparaît pas ..

normal, tu la détruit à cette ligne

Code :

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

document.getElementById('dep').options.length = 0;

si tu veux la conserver mets length à 1, ATTENTION il te faudra en tenir compte dans ta boucle for.

[Aloam]

ok je te remercie j'avais essayé de mettre length=1 mais je n'avais pas modifié ma boucle for..

[Aloam]

Code :

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

1
2
3
 
 
for (i=1; i<ok.length; i++)

Pour que sa fonctionne, j'ai du rajouter une option factice en 1ere position au sein de mon tableau.. ^^'

Code :

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

1
2
3
 
 
var ok = new Array("","Bas-Rhin","Haut-Rhin");

Avec ce bricolage, ma boucle insère bien mes deux options [1] et [2] dans mon select sans "effacer" la 1ere [0] déjà inscrite

[andry.aime]

Sans avoir ajouté dans le tableau, tu utilisent seulement options.length ou bien tu ajoutes 1 à l'indice de la boucle i.

Code :

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

1
2
3
4
5
6
7
var ok = new Array("Bas-Rhin","Haut-Rhin");
...
for (i=0; i<ok.length; i++)
	{
 		document.getElementById('dep').options[i+1] = new Option(ok[i],ok[i]);
 
	}

A+.

[sekaijin]

Code html :

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

<select name="regions" id="re" onchange="dep();">

Code :

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

document.getElementById('dep')

Comme toujous je dirais que ça ne sert à rien de rechercher des id dans la page

Code html :

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

<select name="regions" id="re"onchange="dep(this);">

Code javascript :

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

1
2
3
function dep(dep) {
    // cette ligne ne sert à rien vu que dep est passé en paramètre
    // var dep = document.getElementById('re');')

A+JYT

[Aloam]

Parfait tout fonctionne j'essai de finaliser mon code mais je bute sur la sélection d'une option avec "selected" :/

J'ai testé quelques scripts mais ça ne fonctionne pas..

J'aimerai que l'option sélectionné manuellement dans le select des départements soit toujours sélectionné au rechargement de la page, comme pour un echo 'selected="selected"' en PHP.
Une fois la sélection faite je vais devoir récupérer la valeur afin d'effectuer mes vérifications côté serveur.

Vous avez des idées ?