Discussion :

[L'aigle de Carthage]

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

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
 
<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

[Jumano]

Bonjour,
Il faudrait se tourner vers AJAX ...
Un très bon exemple de listes liées ici

[L'aigle de Carthage]

Merci pour le conseil mais, malheureusement, je ne sais pas travailler avec l'AJAX....

[Jumano]

Tout est expliqué dans l'exemple, il faut juste lire un peu et modifier le code donné ...

[L'aigle de Carthage]

Merci encore une fois, mais j'ai pu adapté ce code au mien....
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....

[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)

[L'aigle de Carthage]

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

Pourrais-je avoir un peu plus d'explication ?

[shaun_the_sheep]

Salut,

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

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.

[L'aigle de Carthage]

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

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
<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 :

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
 
<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 :

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
<?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 ?

[shaun_the_sheep]

Salut,

Pour moi le soucis est la:

Code :

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

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 :

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

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).

[L'aigle de Carthage]

<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'

Pourriez-vous vous expliquez de plus
Merci.

[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

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 :

.......
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.