undefined formulaire de recherche par pays et region

**deathart** · 20/10/2012, 14h46

Salut à tous,

Voila je code jamais en javascript mais la j'ai pas le choix donc aucune conaissance donc dans un formulaire de recherche, j'ai 2select (1 pays et 1 region)

Donc si on selectionne la france j'ai les régions de france et pareille pour belgique

Voici le code :

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
 
var France = ["Choisissez la région","Alsace","Aquitaine", "Auvergne", "Basse-Normandie", "Bourgogne", "Bretagne", "Centre", "Champagne-Ardenne", "Corse", "Franche-Comté", "Haute-Normandie", "Ile-de-France", "Languedoc-Roussillon", "Limousin", "Lorraine", "Midi-Pyrénées", "Nord-Pas-de-Calais", "Pays de la Loire", "Picardie", "Poitou-Charentes", "Provence-Alpes-Côte d\'Azur", "Rhône-Alpes", "Guadeloupe", "Martinique", "Guyane", "Réunion"];
var Belgique = ["Choisissez la région","Anvers", "Brabant Flamant", "Brabant Wallon", "Bruxelles", "Fland. Occidentale", "Flandre Orientale", "Hainaut", "Liège", "Limbourg", "Namur", "Prov. Luxembourg"];
 
function swapOptions(ArrayName){
	var ExSelect = document.theForm.examples;
	var theArray = eval(ArrayName);
	setOptionText(ExSelect, theArray);
}
 
function setOptionText(theSelect, theArray){
	for (loop = 0; loop < theSelect.options.length; loop++){
		theSelect.options[loop].text = theArray[loop];
	}
}

et le 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
<form name="theForm" enctype="multipart/form-data">
          <select name="chooseCat" onchange="swapOptions(this.options[selectedIndex].text);" size="1">
                 <option value="0">Choisissez le pays</option>
              <option value="1">France</option>
              <option value="2">Belgique</option>
            </select> <br /><select name="examples" size="1">
                <option value="0">Choisissez la r&eacute;gion</option>
                <option value="1">Alsace</option>
<option value="2">Aquitaine</option>
<option value="3">Auvergne</option>
<option value="4">Basse-Normandie</option>
<option value="5">Bourgogne</option>
<option value="6">Bretagne</option>
<option value="7">Centre</option>
<option value="8">Champagne-Ardenne</option>
<option value="9">Corse</option>
<option value="10">Franche-Comté</option>
<option value="11">Haute-Normandie</option>
<option value="12">Ile-de-France</option>
<option value="13">Languedoc-Roussillon</option>
<option value="14">Limousin</option>
<option value="15">Lorraine</option>
<option value="16">Midi-Pyrénées</option>
<option value="17">Nord-Pas-de-Calais</option>
<option value="18">Pays de la Loire</option>
<option value="19">Picardie</option>
<option value="20">Poitou-Charentes</option>
<option value="21">Provence-Alpes-Côte d\'Azur</option>
<option value="22">Rhône-Alpes</option>
<option value="23">Guadeloupe</option>
<option value="24">Martinique</option>
<option value="25">Guyane</option>
<option value="26">Réunion</option>
            </select>
        </form>

donc quand je suis dans les region de belgique aprés Prov. Luxembourg j'ai que des undefined :/ d'aprés mes recherche c'est mes tableaux qui merdouille

**NoSmoking** · 20/10/2012, 15h13

Bonjour,
il ne faut pas boucler sur theSelect.options.length mais sur theArray.length en ayant pris soin de vider le select des options inutiles avant.

Code :

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

1
2
3
4
5
6
7
function setOptionText(theSelect, theArray){
  var loop, nb = theArray.length;
  theSelect.options.length = nb;
  for (loop = 0; loop < nb; loop++){
    theSelect.options[loop].text = theArray[loop];
  }
}

**deathart** · 20/10/2012, 16h14

9a fonction niquel et comment ej peux faire pour aprés avoir choisis la region la liste des departement de cette region s'affiche ?

et j'ai récupéré :

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
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
var region_departments = Array();
region_departments[1] = Array(); 
 
        region_departments[1][67] = "Bas-Rhin"; 
region_departments[1][68] = "Haut-Rhin"; 
 
region_departments[2] = Array(); 
 
        region_departments[2][24] = "Dordogne"; 
region_departments[2][33] = "Gironde"; 
region_departments[2][40] = "Landes"; 
region_departments[2][47] = "Lot-et-Garonne"; 
region_departments[2][64] = "Pyrénées-Atlantiques"; 
 
region_departments[3] = Array(); 
 
        region_departments[3][3] = "Allier"; 
region_departments[3][15] = "Cantal"; 
region_departments[3][43] = "Haute-Loire"; 
region_departments[3][63] = "Puy-de-Dôme"; 
 
region_departments[4] = Array(); 
 
        region_departments[4][14] = "Calvados"; 
region_departments[4][50] = "Manche"; 
region_departments[4][61] = "Orne"; 
 
region_departments[5] = Array(); 
 
        region_departments[5][21] = "Côte-d'Or"; 
region_departments[5][58] = "Nièvre"; 
region_departments[5][71] = "Saône-et-Loire"; 
region_departments[5][89] = "Yonne"; 
 
region_departments[6] = Array(); 
 
        region_departments[6][22] = "Côtes-d'Armor"; 
region_departments[6][29] = "Finistère"; 
region_departments[6][35] = "Ille-et-Vilaine"; 
region_departments[6][56] = "Morbihan"; 
 
region_departments[7] = Array(); 
 
        region_departments[7][18] = "Cher"; 
region_departments[7][28] = "Eure-et-Loir"; 
region_departments[7][36] = "Indre"; 
region_departments[7][37] = "Indre-et-Loire"; 
region_departments[7][41] = "Loir-et-Cher"; 
region_departments[7][45] = "Loiret"; 
 
region_departments[8] = Array(); 
 
        region_departments[8][8] = "Ardennes"; 
region_departments[8][10] = "Aube"; 
region_departments[8][51] = "Marne"; 
region_departments[8][52] = "Haute-Marne"; 
 
region_departments[10] = Array(); 
 
        region_departments[10][25] = "Doubs"; 
region_departments[10][39] = "Jura"; 
region_departments[10][70] = "Haute-Saône"; 
region_departments[10][90] = "Territoire de Belfort"; 
 
region_departments[11] = Array(); 
 
        region_departments[11][27] = "Eure"; 
region_departments[11][76] = "Seine-Maritime"; 
 
region_departments[12] = Array(); 
 
        region_departments[12][75] = "Paris"; 
region_departments[12][77] = "Seine-et-Marne"; 
region_departments[12][78] = "Yvelines"; 
region_departments[12][91] = "Essonne"; 
region_departments[12][92] = "Hauts-de-Seine"; 
region_departments[12][93] = "Seine-Saint-Denis"; 
region_departments[12][94] = "Val-de-Marne"; 
region_departments[12][95] = "Val-d'Oise"; 
 
region_departments[13] = Array(); 
 
        region_departments[13][11] = "Aude"; 
region_departments[13][30] = "Gard"; 
region_departments[13][34] = "Hérault"; 
region_departments[13][48] = "Lozère"; 
region_departments[13][66] = "Pyrénées-Orientales"; 
 
region_departments[14] = Array(); 
 
        region_departments[14][19] = "Corrèze"; 
region_departments[14][23] = "Creuse"; 
region_departments[14][87] = "Haute-Vienne"; 
 
region_departments[15] = Array(); 
 
        region_departments[15][54] = "Meurthe-et-Moselle"; 
region_departments[15][55] = "Meuse"; 
region_departments[15][57] = "Moselle"; 
region_departments[15][88] = "Vosges"; 
 
region_departments[16] = Array(); 
 
        region_departments[16][9] = "Ariège"; 
region_departments[16][12] = "Aveyron"; 
region_departments[16][31] = "Haute-Garonne"; 
region_departments[16][32] = "Gers"; 
region_departments[16][46] = "Lot"; 
region_departments[16][65] = "Hautes-Pyrénées"; 
region_departments[16][81] = "Tarn"; 
region_departments[16][82] = "Tarn-et-Garonne"; 
 
region_departments[17] = Array(); 
 
        region_departments[17][59] = "Nord"; 
region_departments[17][62] = "Pas-de-Calais"; 
 
region_departments[18] = Array(); 
 
        region_departments[18][44] = "Loire-Atlantique"; 
region_departments[18][49] = "Maine-et-Loire"; 
region_departments[18][53] = "Mayenne"; 
region_departments[18][72] = "Sarthe"; 
region_departments[18][85] = "Vendée"; 
 
region_departments[19] = Array(); 
 
        region_departments[19][2] = "Aisne"; 
region_departments[19][60] = "Oise"; 
region_departments[19][80] = "Somme"; 
 
region_departments[20] = Array(); 
 
        region_departments[20][16] = "Charente"; 
region_departments[20][17] = "Charente-Maritime"; 
region_departments[20][79] = "Deux-Sèvres"; 
region_departments[20][86] = "Vienne"; 
 
region_departments[21] = Array(); 
 
        region_departments[21][4] = "Alpes-de-Haute-Provence"; 
region_departments[21][5] = "Hautes-Alpes"; 
region_departments[21][6] = "Alpes-Maritimes"; 
region_departments[21][13] = "Bouches-du-Rhône"; 
region_departments[21][83] = "Var"; 
region_departments[21][84] = "Vaucluse"; 
 
region_departments[22] = Array(); 
 
        region_departments[22][1] = "Ain"; 
region_departments[22][7] = "Ardèche"; 
region_departments[22][26] = "Drôme"; 
region_departments[22][38] = "Isère"; 
region_departments[22][42] = "Loire"; 
region_departments[22][69] = "Rhône"; 
region_departments[22][73] = "Savoie"; 
region_departments[22][74] = "Haute-Savoie";

sur un site

**NoSmoking** · 21/10/2012, 09h18

Même si la structure ne me semble pas la "plus appropriée", tu peux parcourir chaque sous tableaux comme ceci par exemple

Code :

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

1
2
3
4
5
6
7
8
var indice,
    chaine = '',
    tableau = region_departments[21];
 
for( indice in tableau){
  chaine += indice +' = ' +tableau[indice] +'\n';
}
alert( chaine);

**deathart** · 21/10/2012, 10h34

D'accord mais je dois faire comment pour l’intégrer ? je crée une fonction ? ou autre je connais rien en js et comment faire aussi pour cacher le select des départements quand on choisi la Belgique ?

Merci de votre patience avec moi ^^

**NoSmoking** · 21/10/2012, 12h31

On va essayer de faire avec ta structure en en modifiant quand même une petite partie

Code :

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

1
2
3
var pays_regions = [];
pays_regions['France']   = ["Choisissez la région","Alsace","Aquitaine", "Auvergne", "Basse-Normandie", "Bourgogne", "Bretagne", "Centre", "Champagne-Ardenne", "Corse", "Franche-Comté", "Haute-Normandie", "Ile-de-France", "Languedoc-Roussillon", "Limousin", "Lorraine", "Midi-Pyrénées", "Nord-Pas-de-Calais", "Pays de la Loire", "Picardie", "Poitou-Charentes", "Provence-Alpes-Côte d\'Azur", "Rhône-Alpes", "Guadeloupe", "Martinique", "Guyane", "Réunion"];
pays_regions['Belgique'] = ["Choisissez la région","Anvers", "Brabant Flamant", "Brabant Wallon", "Bruxelles", "Fland. Occidentale", "Flandre Orientale", "Hainaut", "Liège", "Limbourg", "Namur", "Prov. Luxembourg"];

voilà pour la déclaration des données des pays, on conserve le reste même si il me semble qu'une structure type JSON aurait été plus propre.

On va également partir sur base de ce code 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
<form name="theForm" enctype="multipart/form-data">
  <select id="pays" name="pays" onchange="setRegion(this.value);" size="1">
    <option value="0">Choisissez le pays</option>
    <option value="France">France</option>
    <option value="Belgique">Belgique</option>
  </select>
  <br>
  <select id="region" name="region" size="1" onchange="setDepartement(this.value);">
  </select>
  <br>
  <select id="departement" name="departement">
  </select>
</form>

les noms sont ainsi un peu plus parlant, à noter le changement des values dans le SELECT pays.

Cela entraine un changement pour la fonction de mise à jour sur le SELECT pays, qui devient :

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
function setRegion( pays){
  // pointe sur les données à traiter
  var oTableau = pays_regions[ pays];
  var i, nb = oTableau ? oTableau.length : 0;
  // recup le select destination des données
  var oSelect = document.getElementById('region');
  // initialisation du nombre d'option
  oSelect.options.length = nb;
  // rempli les options
  for( i = 0; i< nb; i++){
    oSelect.options[i].value = i;
    oSelect.options[i].text = oTableau[i];
  }
  // selection sur le 1st
  oSelect.selectedIndex = 0;
  // affiche/masque suivant nombre d'option
  oSelect.style.display = i ? '' :'none';
  // mise à jour des départements
  setDepartement( -1);
}

je pense que cela est suffisamment commenté.

Cette fonction appelles la fonction setDepartement qui peut ressembler à cela

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
function setDepartement( numero){
  var indice, i = 0;
  // recup valeur du pays
  var pays = document.getElementById('pays').value;
  // recup le select destination des données
  var oSelect = document.getElementById('departement');
  // remise à zéro du nombre d'option
  oSelect.options.length = 0;
 
  if( pays === 'France'){
    // pointe sur les données à traiter
    var oTableau = region_departments[numero];
    if( oTableau){
      // rempli les options
      for( indice in oTableau){
        oSelect.options.length++;
        oSelect.options[i].value = indice;
        oSelect.options[i].text  = oTableau[indice];
        i++;
      }
      // selection sur le 1st
      oSelect.selectedIndex = 0;
    }
  }
  // affiche/masque suivant nombre d'option
  oSelect.style.display = i ? '' :'none';
}

cette fonction tiens compte du chois du pays, à lire les commentaires

Pour faire plus propre on peut mettre un appel sur le onload de la fonction setRegion

Code :

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

1
2
3
window.onload = function(){
  setRegion( '');
};

undefined formulaire de recherche par pays et region

JavaScript

Vue hybride

Discussions similaires

Partager

Partager