Les formulaires (partie 2) Comment lier deux listes déroulantes entre elles ? [Fait]

**Auteur** · 13/12/2013, 22h09

Comment lier deux listes déroulantes entre elles ?

http://javascript.developpez.com/faq...js#listesLiees

la syntaxe est un peu vieillotte mais malgré tout le script fonctionne encore sous FF et IE 9.

Toutefois je ne sais pas trop comment aborder la mise à jour. J'ai plusieurs idées en tête :
- façon simple : mettre à jour la syntaxe ;
- manière plus élaborée : essayer d'utiliser la syntaxe JSON (créer des objets pays, villes, rues) ;
- plus complexe (en tout cas pour moi) : utiliser AJAX : créer un fichier XML que le script ira lire pour créer les listes. Je ne suis pas trop familier avec AJAX, donc un petit coup de main serait le bienvenu.

**Auteur** · 14/12/2013, 20h02

Voici une proposition de correction :

Code javascript :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
var Element = function(nom)
{
	this.nom = nom;
	this.tabObj = new Array();
}
 
Element.prototype={
	rNom : function()
	{
		return this.nom;
	}
	,
	ajouterObj : function(obj)
	{
		this.tabObj.push(obj);
	}
	,
	rObj: function(idx)
	{
		return this.tabObj[idx];
	}
	,
	nbObj : function()
	{
		return this.tabObj.length;
	}
 
}
 
/*********************************************************************/
var Continent = new Element("Continent");
 
Continent.ajouterObj(new Element("Pays1"));
Continent.rObj(0).ajouterObj(new Element("Ville1 Pays1"));
Continent.rObj(0).rObj(0).ajouterObj(new Element("Rue1 Ville1 Pays1"));
Continent.rObj(0).rObj(0).ajouterObj(new Element("Rue2 Ville1 Pays1"));
Continent.rObj(0).rObj(0).ajouterObj(new Element("Rue3 Ville1 Pays1"));
 
Continent.rObj(0).ajouterObj(new Element("Ville2 Pays1"));
Continent.rObj(0).rObj(1).ajouterObj(new Element("Rue1 Ville2 Pays1"));
Continent.rObj(0).rObj(1).ajouterObj(new Element("Rue2 Ville2 Pays1"));
 
Continent.rObj(0).ajouterObj(new Element("Ville3 Pays1"));
Continent.rObj(0).rObj(2).ajouterObj(new Element("Rue1 Ville3 Pays1"));
Continent.rObj(0).rObj(2).ajouterObj(new Element("Rue2 Ville3 Pays1"));
 
Continent.ajouterObj(new Element("Pays2"));
Continent.rObj(1).ajouterObj(new Element("Ville1 Pays2"));
Continent.rObj(1).rObj(0).ajouterObj(new Element("Rue1 Ville1 Pays2"));
Continent.rObj(1).rObj(0).ajouterObj(new Element("Rue2 Ville1 Pays2"));
 
Continent.rObj(1).ajouterObj(new Element("Ville2 Pays2"));
Continent.rObj(1).rObj(1).ajouterObj(new Element("Rue1 Ville2 Pays2"));
Continent.rObj(1).rObj(1).ajouterObj(new Element("Rue2 Ville2 Pays2"));
 
 
/*********************************************************************/
function charger(listeSrc)
{
	var listeDest;
	var idxListeSrc, idxListeDest;
	var obj;
 
 
	if (listeSrc != null) 
	{
		idxListeSrc = listeSrc.id.replace("liste_","");
		idxListeSrc = parseInt(idxListeSrc, 10);
		idxListeDest = idxListeSrc + 1;
	}
	else
	{
		idxListeSrc = -1;
		idxListeDest = 0;
	}
 
	/*************************/
	obj = Continent;	// /!\ variable globale Continent
 
	for (i=0; i < idxListeDest; i++)
 		obj = obj.rObj(document.getElementById("liste_" + i).selectedIndex-1);
 
 
	listeDest = document.getElementById("liste_" + idxListeDest);
	listeDest.options.length = 0;
	listeDest.add(new Option("Faites votre choix", "0", false, false));
 
	if (obj!=null)
	{
		n = obj.nbObj();
		for (i=0; i<n; i++)
		{
			listeDest.add(new Option(obj.rObj(i).rNom(), obj.rObj(i).rNom(), false, false));
		}
	}
 
}

Code html :

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
 
<body onload="charger(null)">
 
<select id="liste_0" onchange="charger(this)">
	<option value="0">Faites votre choix</options>
</select>
 
<select id="liste_1" onchange="charger(this)">
	<option value="0">Faites votre choix</options>
</select>
 
<select id="liste_2">
	<option value="0">Faites votre choix</options>
</select>
 
 
</body>

qu'en pensez-vous ?

**vermine** · 15/12/2013, 12h28

Revoir la syntaxe n'est pas plus mal. Nous pouvons avoir trois Q/R : versions actuelle, JSON et Ajax.

**NoSmoking** · 15/12/2013, 22h54

Bonjour,

Envoyé par Auteur

Voici une proposition de correction :...

je ne suis pas sûr que cette approche soit très abordable pour un lecteur de FAQ débutant.

La version Ajax quant à elle existe déjà, Web 2.0, allez plus loin avec AJAX et XMLHttpRequest pas sûr qu'il soit nécessaire de la reprendre ici. Dans cette FAQ il semble que nous traitons de listes simples.

Je dirais apriori qu'il faudrait

Envoyé par Auteur

- manière plus élaborée : essayer d'utiliser la syntaxe JSON (créer des objets pays, villes, rues) ;

**vermine** · 16/12/2013, 09h42

Oui okay, je mettrai un lien vers l'article pour la version Ajax.

NoSmoking, quel code proposerais-tu alors ?

**NoSmoking** · 16/12/2013, 23h29

NoSmoking, quel code proposerais-tu alors ?

un truc entre les 2.

concernant le HTML

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <form name="a_fond_la_forme">
    <p>
      <label for="listepays">Choisir un pays</label>
      <select id="listepays" name="listepays" onchange='fillSelect(this.id, this.value)'></select>
    </p>
    <p>
      <label for="listeville">Choisir une ville</label>
      <select id="listeville" name="listeville" onchange='fillSelect(this.id, this.value)'></select>
    </p>
    <p>
      <label for="listerue">Choisir une rue</label>
      <select id="listerue" name="listerue"></select>
    </p>
  </form>

Pour la déclaration des données

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
76
77
78
79
80
81
82
83
84
/**
* déclaration des données pour les SELECT
**/
var pays = [
  {'valeur': 'p0', 'texte': 'pays 0'},
  {'valeur': 'p1', 'texte': 'pays 1'},
  {'valeur': 'p2', 'texte': 'pays 2'}
];
var ville = {
  'p0' :  // clé sur data pays
    [
      { 'valeur': 'p0v0', 'texte': 'pays_0 ville_0'},
      { 'valeur': 'p0v1', 'texte': 'pays_0 ville_1'},
      { 'valeur': 'p0v2', 'texte': 'pays_0 ville_2'}
    ],
  'p1' :
    [
      { 'valeur': 'p1v0', 'texte': 'pays_1 ville_0'},
      { 'valeur': 'p1v1', 'texte': 'pays_1 ville_1'},
      { 'valeur': 'p1v2', 'texte': 'pays_1 ville_2'}
    ],
  'p2' :
    [
      { 'valeur': 'p2v0', 'texte': 'pays_2 ville_0'},
      { 'valeur': 'p2v1', 'texte': 'pays_2 ville_1'},
      { 'valeur': 'p2v2', 'texte': 'pays_2 ville_2'}
    ]
  };
var rue = {
  'p0v0' :  // clé sur data ville
    [
      { 'valeur': 'p0v0r0', 'texte': 'pays_0 ville_0 rue_0'},
      { 'valeur': 'p0v0r1', 'texte': 'pays_0 ville_0 rue_1'},
      { 'valeur': 'p0v0r2', 'texte': 'pays_0 ville_0 rue_2'}
    ],
  'p0v1' :
    [
      { 'valeur': 'p0v1r0', 'texte': 'pays_0 ville_1 rue_0'},
      { 'valeur': 'p0v1r1', 'texte': 'pays_0 ville_1 rue_1'},
      { 'valeur': 'p0v1r2', 'texte': 'pays_0 ville_1 rue_2'}
    ],
  'p0v2' :
    [
      { 'valeur': 'p0v2r0', 'texte': 'pays_0 ville_2 rue_0'},
      { 'valeur': 'p0v2r1', 'texte': 'pays_0 ville_2 rue_1'},
      { 'valeur': 'p0v2r2', 'texte': 'pays_0 ville_2 rue_2'}
    ],
  'p1v0' :
    [
      { 'valeur': 'p1v0r0', 'texte': 'pays_1 ville_0 rue_0'},
      { 'valeur': 'p1v0r1', 'texte': 'pays_1 ville_0 rue_1'},
      { 'valeur': 'p1v0r2', 'texte': 'pays_1 ville_0 rue_2'}
    ],
  'p1v1' :
    [
      { 'valeur': 'p1v1r0', 'texte': 'pays_1 ville_1 rue_0'},
      { 'valeur': 'p1v1r1', 'texte': 'pays_1 ville_1 rue_1'},
      { 'valeur': 'p1v1r2', 'texte': 'pays_1 ville_1 rue_2'}
    ],
  'p1v2' :
    [
      { 'valeur': 'p1v2r0', 'texte': 'pays_1 ville_2 rue_0'},
      { 'valeur': 'p1v2r1', 'texte': 'pays_1 ville_2 rue_1'},
      { 'valeur': 'p1v2r2', 'texte': 'pays_1 ville_2 rue_2'}
    ],
  'p2v0' :
    [
      { 'valeur': 'p2v0r0', 'texte': 'pays 2 ville_0 rue_0'},
      { 'valeur': 'p2v0r1', 'texte': 'pays 2 ville_0 rue_1'},
      { 'valeur': 'p2v0r2', 'texte': 'pays 2 ville_0 rue_2'}
    ],
  'p2v1' :
    [
      { 'valeur': 'p2v1r0', 'texte': 'pays 2 ville_1 rue_0'},
      { 'valeur': 'p2v1r1', 'texte': 'pays 2 ville_1 rue_1'},
      { 'valeur': 'p2v1r2', 'texte': 'pays 2 ville_1 rue_2'}
    ],
  'p2v2' :
    [
      { 'valeur': 'p2v2r0', 'texte': 'pays 2 ville_2 rue_0'},
      { 'valeur': 'p2v2r1', 'texte': 'pays 2 ville_2 rue_1'},
      { 'valeur': 'p2v2r2', 'texte': 'pays 2 ville_2 rue_2'}
    ]
  };

Pour la partie fonction, en respectant l'orientation du départ, j'aurais tendance à mettre ceci

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
/**
* fonction d'ajout des options
**/
function updateSelect( id_select, liste){
  var oOption,
      oSelect = document.getElementById( id_select),
      i, nb = liste.length;
  // vide le SELECT
  oSelect.options.length = 0;
  // création des options d'après la liste
  for (i = 0; i < nb; i++) {
    // création option
    oOption = new Option( liste[i].texte, liste[i].valeur);
    // ajout de l'option en fin
    oSelect.add( oOption);    
  }
  // on retourne la valeur pour le SELECT suivant
  return oSelect.value;
}
/**
* fonction de remplissage des SELECT
**/
function fillSelect( id_select, valeur) {
  switch (id_select) {
    case 'init':
      valeur = updateSelect( 'listepays', pays);    
      // pas de break pour une initialisation complète
    case 'listepays':
      valeur = updateSelect( 'listeville', ville[valeur]);
      updateSelect( 'listerue', rue[valeur]);
      break;
    case 'listeville':
      updateSelect( 'listerue', rue[valeur]);    
      break;
  }
}

Pour cette dernière fonction j'aurais une préférence pour un effet cascade bien dans l'esprit lié, en écrivant le code comme suit

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
/**
* fonction de remplissage des SELECT
**/
function fillSelect( id_select, valeur) {
  switch (id_select) {
    case 'init':
      // mise à jour SELECT
      valeur = updateSelect( 'listepays', pays);    
      // appel sur SELECT lié
      fillSelect( 'listepays', valeur);
      break;
    case 'listepays':
      // mise à jour SELECT    
      valeur = updateSelect( 'listeville', ville[valeur]);
      // appel sur SELECT lié
      fillSelect( 'listeville', valeur);
      break;
    case 'listeville':
      // mise à jour SELECT    
      updateSelect( 'listerue', rue[valeur]);    
      break;
  }
}

en final le code complet donnerait ceci

Code html :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comment lier des listes déroulantes entre elles</title>
<style>
body{
  margin:2em;
  font-family:Verdana;
  font-size:100%
}
label{
  display:inline-block;
  width:10em;
}
select{
  width:15em;
  font-family: Verdana;
}
</style>
<script>
/**
* déclaration des données pour les SELECT
**/
var pays = [
  {'valeur': 'p0', 'texte': 'pays 0'},
  {'valeur': 'p1', 'texte': 'pays 1'},
  {'valeur': 'p2', 'texte': 'pays 2'}
];
var ville = {
  'p0' :  // clé sur data pays
    [
      { 'valeur': 'p0v0', 'texte': 'pays_0 ville_0'},
      { 'valeur': 'p0v1', 'texte': 'pays_0 ville_1'},
      { 'valeur': 'p0v2', 'texte': 'pays_0 ville_2'}
    ],
  'p1' :
    [
      { 'valeur': 'p1v0', 'texte': 'pays_1 ville_0'},
      { 'valeur': 'p1v1', 'texte': 'pays_1 ville_1'},
      { 'valeur': 'p1v2', 'texte': 'pays_1 ville_2'}
    ],
  'p2' :
    [
      { 'valeur': 'p2v0', 'texte': 'pays_2 ville_0'},
      { 'valeur': 'p2v1', 'texte': 'pays_2 ville_1'},
      { 'valeur': 'p2v2', 'texte': 'pays_2 ville_2'}
    ]
  };
var rue = {
  'p0v0' :  // clé sur data ville
    [
      { 'valeur': 'p0v0r0', 'texte': 'pays_0 ville_0 rue_0'},
      { 'valeur': 'p0v0r1', 'texte': 'pays_0 ville_0 rue_1'},
      { 'valeur': 'p0v0r2', 'texte': 'pays_0 ville_0 rue_2'}
    ],
  'p0v1' :
    [
      { 'valeur': 'p0v1r0', 'texte': 'pays_0 ville_1 rue_0'},
      { 'valeur': 'p0v1r1', 'texte': 'pays_0 ville_1 rue_1'},
      { 'valeur': 'p0v1r2', 'texte': 'pays_0 ville_1 rue_2'}
    ],
  'p0v2' :
    [
      { 'valeur': 'p0v2r0', 'texte': 'pays_0 ville_2 rue_0'},
      { 'valeur': 'p0v2r1', 'texte': 'pays_0 ville_2 rue_1'},
      { 'valeur': 'p0v2r2', 'texte': 'pays_0 ville_2 rue_2'}
    ],
  'p1v0' :
    [
      { 'valeur': 'p1v0r0', 'texte': 'pays_1 ville_0 rue_0'},
      { 'valeur': 'p1v0r1', 'texte': 'pays_1 ville_0 rue_1'},
      { 'valeur': 'p1v0r2', 'texte': 'pays_1 ville_0 rue_2'}
    ],
  'p1v1' :
    [
      { 'valeur': 'p1v1r0', 'texte': 'pays_1 ville_1 rue_0'},
      { 'valeur': 'p1v1r1', 'texte': 'pays_1 ville_1 rue_1'},
      { 'valeur': 'p1v1r2', 'texte': 'pays_1 ville_1 rue_2'}
    ],
  'p1v2' :
    [
      { 'valeur': 'p1v2r0', 'texte': 'pays_1 ville_2 rue_0'},
      { 'valeur': 'p1v2r1', 'texte': 'pays_1 ville_2 rue_1'},
      { 'valeur': 'p1v2r2', 'texte': 'pays_1 ville_2 rue_2'}
    ],
  'p2v0' :
    [
      { 'valeur': 'p2v0r0', 'texte': 'pays 2 ville_0 rue_0'},
      { 'valeur': 'p2v0r1', 'texte': 'pays 2 ville_0 rue_1'},
      { 'valeur': 'p2v0r2', 'texte': 'pays 2 ville_0 rue_2'}
    ],
  'p2v1' :
    [
      { 'valeur': 'p2v1r0', 'texte': 'pays 2 ville_1 rue_0'},
      { 'valeur': 'p2v1r1', 'texte': 'pays 2 ville_1 rue_1'},
      { 'valeur': 'p2v1r2', 'texte': 'pays 2 ville_1 rue_2'}
    ],
  'p2v2' :
    [
      { 'valeur': 'p2v2r0', 'texte': 'pays 2 ville_2 rue_0'},
      { 'valeur': 'p2v2r1', 'texte': 'pays 2 ville_2 rue_1'},
      { 'valeur': 'p2v2r2', 'texte': 'pays 2 ville_2 rue_2'}
    ]
  };
/**
* fonction d'ajout des options
**/  
function updateSelect( id_select, liste){
  var oOption,
      oSelect = document.getElementById( id_select),
      i, nb = liste.length;
  // vide le SELECT
  oSelect.options.length = 0;
  // création des options d'après la liste
  for (i = 0; i < nb; i++) {
    // création option
    oOption = new Option( liste[i].texte, liste[i].valeur);
    // ajout de l'option en fin
    oSelect.add( oOption);    
  }
  // on retourne la valeur pour le SELECT suivant
  return oSelect.value;
}
/**
* fonction de remplissage des SELECT
**/
function fillSelect( id_select, valeur) {
  switch (id_select) {
    case 'init':
      // mise à jour SELECT
      valeur = updateSelect( 'listepays', pays);    
      // appel sur SELECT lié
      fillSelect( 'listepays', valeur);
      break;
    case 'listepays':
      // mise à jour SELECT    
      valeur = updateSelect( 'listeville', ville[valeur]);
      // appel sur SELECT lié
      fillSelect( 'listeville', valeur);
      break;
    case 'listeville':
      // mise à jour SELECT    
      updateSelect( 'listerue', rue[valeur]);    
      break;
  }
}
 
</script>
</head>
<body>
  <form name="a_fond_la_forme">
    <p>
      <label for="listepays">Choisir un pays</label>
      <select id="listepays" name="listepays" onchange='fillSelect(this.id, this.value)'></select>
    </p>
    <p>
      <label for="listeville">Choisir une ville</label>
      <select id="listeville" name="listeville" onchange='fillSelect(this.id, this.value)'></select>
    </p>
    <p>
      <label for="listerue">Choisir une rue</label>
      <select id="listerue" name="listerue"></select>
    </p>
  </form>
<script>
// remplissage des SELECT lorsque le DOM est constitué
fillSelect('init');
</script>
</body>
</html>

Les formulaires (partie 2) Comment lier deux listes déroulantes entre elles ? [Fait] [FAQ]

Contributions JavaScript / AJAX

Vue hybride

Discussions similaires

Partager

Partager