Discussion :

[scoal]

Bonjour,

Voilà je but depuis un petit moment sur un petit soucis...
Je voulais faire 3 listes déroulantes, la 1ère va généré le contenu et afficher le <select> de la 2nd liste, la 2nd génère le contenu et affiche le <select> de la 3ème, jusqu'ici c'est cool
Mais quand je rechange le choix sur la première liste, la seconde est bien généré, mais la 3ème ne se rafraichis pas et reste donc avec la suite de choix précédent et n'est pas "caché".
Donc s'est pas très fonctionnel...

Bref voici le code :
Partie 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
 
<form action="" method="post">
<table>
<tr>
<td>Country: </td>
<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getStateList(this)">
<option>Any</option>
<?php
$sql = 'SELECT * FROM pays ORDER BY pays_int';
$query = mysql_query($sql) or die( 'Erreur' );
while ( $g = mysql_fetch_array( $query ))
{
echo '<option value="'.$g['id_pays'].'">'.$g['pays_int'].'</option>';
}
?>
</select>
</td>
</tr>
<tr id="dhtml_state" style="display:none">
<td>State:</td>
<td><select id="dhtmlgoodies_state" name="dhtmlgoodies_state" onchange="getCityList(this)"></select></td>
</tr>
<tr id="dhtml_city" style="display:none">
<td>City: </td>
<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city"></select></td>
</tr>
</table>
</form>

Partie JS

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
 
function getStateList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
var sel_state = document.getElementById('dhtmlgoodies_state');
sel_state.options.length = 0; // Empty city select box
if(countryCode.length>0){
document.getElementById('dhtml_state').style.display = "";
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getCities.php?countryCode=' + countryCode; // Specifying which file to get
ajax[index].onCompletion = function(){ createState(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function getCityList(sel)
{
var stateCode = sel.options[sel.selectedIndex].value;
var sel_city = document.getElementById('dhtmlgoodies_city');
sel_city.options.length = 0; // Empty city select box
if(stateCode.length>0){
document.getElementById('dhtml_city').style.display = "";
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getCities.php?stateCode=' + stateCode; // Specifying which file to get
ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createState(index)
{
var obj = document.getElementById('dhtmlgoodies_state');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
function createCities(index)
{
var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}

Bref si quelqu'un pourrait m'éclaircir les idées serait le très bien venu

[BaBeuH]

Si j'ai bien compris, il faut que, lorsque tu changes la sélection de la liste 1, ça te désactive la liste 3, en plus de te remplir la liste 2 ?

Il te faut ajouter dans ta fonction getStateList la désactivation/vidage de ta liste 3, du genre :

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
function getStateList(sel)
{
   var sel_city = document.getElementById('dhtmlgoodies_city');
   sel_city.disabled = true;
   var countryCode = sel.options[sel.selectedIndex].value;
   var sel_state = document.getElementById('dhtmlgoodies_state');
   sel_state.options.length = 0; // Empty city select box
   if(countryCode.length>0){
      document.getElementById('dhtml_state').style.display = "";
      var index = ajax.length;
      ajax[index] = new sack();
      ajax[index].requestFile = 'getCities.php?countryCode=' +countryCode; //       Specifying which file to get
      ajax[index].onCompletion = function(){ createState(index) }; // Specify function that will be executed after file has been found
      ajax[index].runAJAX(); // Execute AJAX function
   }
}

Attention de réactiver la liste 3 lorsque la sélection de la liste 2 est modifiée :

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
function getCityList(sel)
{
   var stateCode = sel.options[sel.selectedIndex].value;
   var sel_city = document.getElementById('dhtmlgoodies_city');
   sel_city.disabled = false;
   sel_city.options.length = 0; // Empty city select box
   if(stateCode.length>0){
      document.getElementById('dhtml_city').style.display = "";
      var index = ajax.length;
      ajax[index] = new sack();
      ajax[index].requestFile = 'getCities.php?stateCode=' + stateCode; // Specifying which file to get
      ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found
      ajax[index].runAJAX(); // Execute AJAX function
   }
}

A+

PS : L'idéal pour les listes déroulantes liées entre elles est d'utiliser une fonction générique qui va se charger de faire la(les) requête(s) ajax puis remplir les listes déroulantes en question. Ca peut donner un truc du genre :

html

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<select id="filtrePays" affect="filtreEtat" desactive="filtreVille">
...
</select>
<select id="filtreEtat" affect="filtreVille">
...
</select>
<select id="filtreVille">
...
</select>

js

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
 
function buildListe(sel)
{
   var value = sel.options[sel.selectedIndex].value; // Valeur du select modifié
   var listeAffectee = document.getElementById(sel.affect); // Select "affecté"
   var listeDesactivee = document.getElementById(sel.desactive); // Select à désactiver
   listeDesactivee.disabled = true;
   listeAffectee.options.length = 0; // Empty city select box
   if(value.length>0){
      document.getElementById(listeAffectee).style.display = "";
      var index = ajax.length;
      ajax[index] = new sack();
      ajax[index].requestFile = 'getCities.php?'+sel.id.replace('filtre','')+'='+value; // Construction de l'url en fonction de l'id du select courant
      ajax[index].onCompletion = function(){ buildOptions(index) }; // Construction des options pour la liste affectée
      ajax[index].runAJAX(); // Execute AJAX function
   }
}

[scoal]

Merci

En fait c'était exactement l'esprit de ce que je cherchais, par contre je l'ai modifié juste pour le "style" de l'id du <tr>, ainsi sa me fait disparaitre la ligne entière (intitulé du select + select, c'est plus esthétique), après je sais pas si maintenant l'ensemble de cette méthode est académique

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
function getStateList(sel)
{
 var sel_city = document.getElementById('dhtml_city'); 
 sel_city.style.display = "none";
 var countryCode = sel.options[sel.selectedIndex].value;
 var sel_state = document.getElementById('dhtmlgoodies_state');
 sel_state.options.length = 0;	// Empty city select box
 if(countryCode.length>0){
  document.getElementById('dhtml_state').style.display = "";
  var index = ajax.length;
  ajax[index] = new sack();
  ajax[index].requestFile = 'getCities.php?countryCode=' + countryCode;	// Specifying which file to get
  ajax[index].onCompletion = function(){ createState(index) };	// Specify function that will be executed after file has been found
  ajax[index].runAJAX();		// Execute AJAX function
 }
}

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
 
function getCityList(sel)
{
 var stateCode = sel.options[sel.selectedIndex].value;
 var sel_city = document.getElementById('dhtmlgoodies_city');
 sel_city.options.length = 0;	// Empty city select box
 if(stateCode.length>0){
  document.getElementById('dhtml_city').style.display = "";
  var index = ajax.length;
  ajax[index] = new sack();	
  ajax[index].requestFile = 'getCities.php?stateCode=' + stateCode;	// Specifying which file to get
  ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
  ajax[index].runAJAX();		// Execute AJAX function
 }
}

Voila, je prend note de ta remarque concernant ta vision des listes déroulantes, je débute en JS donc tout conseil est bon à prendre

Donc ne pas hésiter critiquer le code précédent

Bref, merci encore

Edit : Je viens de lire en détail ton script JS, j'aime beaucoup, il est simple, je vais surement le revoir en détail, merci encore!