[DOM] Listes déroulantes dépendantes

Version imprimable

Salut,
J'ai deux listes déroulantes en PHP:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<tr class="menutab"><td>Produit :</td><td><select name="pt">
                <?
				echo '<option value="0" selected>-------Select-------</option>';
                while(!$adm->eof){ 
				echo '<option value='.$adm->code_admin.'>'.$adm->nom_admin.' '.$adm->prenom_admin.'</option>';						
				$adm->Movenext();
	  			}
 
                ?>
                </select>
                </td></tr>
<tr class="menutab"><td>Version :</td><td><select name="vn">
                <?
				echo '<option value="0" selected>-------Select-------</option>';
                while(!$adm->eof){ 
				echo '<option value='.$adm->code_admin.'>'.$adm->nom_admin.' '.$adm->prenom_admin.'</option>';						
				$adm->Movenext();
	  			}
 
                ?>
                </select>
                </td></tr>

Je cherche un script qui me permet de gérer dynamiquement ces 2 listes, c'est à dire quand je sélectionne un choix de la liste 1, les éléments de la liste2 changent selon ce choix..... J'ai chercher dans le FAQ du javascript sans résultat. :?
Merci

19/04/2008, 11h06
Jumano

Bonjour,
Il faudrait se tourner vers AJAX ...
Un très bon exemple de listes liées ici ;)
19/04/2008, 11h24
L'aigle de Carthage

Merci pour le conseil mais, malheureusement, je ne sais pas travailler avec l'AJAX....
19/04/2008, 11h32
Jumano

Tout est expliqué dans l'exemple, il faut juste lire un peu et modifier le code donné ...
19/04/2008, 12h20
L'aigle de Carthage

Merci encore une fois, mais j'ai pu adapté ce code au mien.... :aie:
Beaucoup d'instructions sont incompréhensibles....
En plus, j'ai lu quelques part qu'il s'agit d'un script JS qui permet de réaliser une telle tache....
19/04/2008, 14h27
shaun_the_sheep

Autre solution en fonction du volume tu charges tes données dans des tableaux javascript à l'ouverture de ta page et du gère un système de filtre dans des fonctions que tu appelles lorsque tu changes la valeur de la liste principale (evenement onchange par exemple sur le select ) .

Tu peux facilement en js modifier le contenu d'une liste déroulante (voir : DOM)
13/05/2008, 08h45
L'aigle de Carthage

Citation:

Tu peux facilement en js modifier le contenu d'une liste déroulante (voir : DOM)

Pourrais-je avoir un peu plus d'explication ? :roll:
13/05/2008, 08h54
shaun_the_sheep

Salut,

je t'invite à regarder cette piste cela peut éventuelement t'aider :

Citation:

nouvel_element = new Option(textOption,idOption,false,true);
document.getElementById(idListe).options[document.getElementById('idListe').length]=nouvel_element;

ainsi j'alimente une liste en javascript.

Concernant la méthode d'Ajax, j'ai fait comme ça mais ça n'a pas marché....
Le script de la fonction:

Code:

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
<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;
			}
 
function go(){
				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
						document.getElementById('version').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxclient.php",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 l'auteur
				sel = document.getElementById('produit');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
			}
		</script>

Mon formulaire:

Code:

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
 
<form  method="post" name="nouv" onsubmit="return verifier()">
<fieldset style="width: 500px">
				<legend>Liste li&eacute;es</legend>
<table>
<tr class="menutab"><td>Client :</td>
				<td><select name="ct">
                <?
				echo '<option value="0" selected>-------Select-------</option>';
                while(!$clt->eof){ 
				echo '<option value='.$clt->code_client.'>'.$clt->societe.'</option>';						
				$clt->Movenext();
	  			}
 
                ?>
                </select>
                </td></tr>
<tr class="menutab"><td>Produit :</td>
				<td><select name="pt" id='produit'  onchange='go()'>
                <?
				echo '<option value="0" selected>-------Select-------</option>';
                while(!$pro->eof){ 
				echo '<option value='.$pro->id.'>'.$pro->produit.'</option>';						
				$pro->Movenext();
	  			}
 
                ?>
                </select>
                </td></tr>
<tr class="menutab"><td>Version :</td>
				<td>
                <div id='version' style='display:inline'>
                <select name="version">
                <?
				echo '<option value="0" selected>-------Select-------</option>';
                while(!$pro->eof){ 
				echo '<option value='.$pro->version.'>'.$pro->version.'</option>';						
				$pro->Movenext();
	  			}
 
                ?>
                </select>
                </div>
                </td></tr>
<tr class="menutab"><td>Date achat :</td><td><input type="Text" name="input1" value="" size="20">
				<a href="javascript:cal1.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Cliquez ici pour obtenir la date."></a></td></tr>                              
</table>
 
<br><center><input type="submit" value="Valider" >
<input type="reset" value="Reset" ><center>
</fieldset>
</form>

et la page ajaxclient.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
 
require_once("possession.class.php");   
require_once("produit.class.php");
 
$poss= new possession($page);
$pro= new produit($page);
 
 
        echo "<select name='livre'>";
        if(isset($_POST["idAuteur"])){
        
        $pro= new produit($page,'where id=\''.$_POST["idAuteur"].'\'' );
                        
                while(!$pro->eof){ 
                        echo "<option value='".$pro->version."'>".$pro->version."</option>";
                }
                $pro->Movenext();
        }
        echo "</select>";
?>

En vous rappelant que je veut lorsque je change le produit, la version change automatiquement .... ;)

Je me demandais d'ou viens l'erreur ? :?

13/05/2008, 11h39
shaun_the_sheep
Salut,

Pour moi le soucis est la:
Code:

1 2 document.getElementById('version').innerHTML = leselect;
tu cherches à mettre un select dans un select en quelque sorte via innerHTML. Soit tu fais quelques choses comme cela dans ta page HTML
Code:

1 2 3 4 5 6 <div id='monselect'> <select id='idX'> <option></option> </select> </div>
Soit tu pars sur du " DOM ". c'est à dire tu reprends ce que je t'ai donné avant et tu fais en sorte que ta page php te renvoi une liste (via ta requete ajax).
13/05/2008, 15h07
L'aigle de Carthage

Citation:

<div id='monselect'>
<select id='idX'>
<option></option>
</select>
</div>

Mais c'est quoi le "monselect"?? en plus j'ai déja le champ id='version' :roll:

Pourriez-vous vous expliquez de plus :mrgreen:
Merci.
13/05/2008, 17h50
shaun_the_sheep

Un identifiant pipo pour mon exemple. En faite pour reprendre ton code, j'encapsule le select dans une div (avec un id à définir).

C'est cette div que je metterai à jour via la commande

Citation:

document.getElementById('version').innerHTML = leselect;

et non le select lui meme comme tu fais.

Sinon si cela ne fonctionne pas, je peux te donner un extrait de code fait aujourd'hui utilisant le DOM:

J'ai une fonction Ajax (j'utilise propotype c'est plus simple) qui appelle chez moi une jsp (mais bon en php c'est pareil) qui me retourne une liste de données formatées (data.lstParticipants['+compteur_participant+'].fill) . Je parcours la liste et alimente mon select comme suit en utilisant le DOM :

Citation:

.......
var compteur_participant=0;
while(compteur_participant<nbParticipant)
{
var lstParticipant=eval('data.lstParticipants['+compteur_participant+'].fill');
var idCdt=lstParticipant[0].fill;
var nom=lstParticipant[1].fill;
var prenom=lstParticipant[2].fill;

//mise à jour de la liste
var txtOption=nom+' '+prenom+' ('+idCdt+')';
var idOption=idCdt;
nouvel_element = new Option(txtOption,idOption,false,true);
document.getElementById(listeCible).options[document.getElementById(listeCible).length]=nouvel_element;

compteur_participant++;

}
....

Suivant ta méthode Ajax tu peux surement faire la même chose , sinon regarde 'Prototype'.

En esperant que cela puisse t'aider.