4 Menus déroulants liés - Petit bug

**grandpa006** · 27/02/2008, 08h42

Bonjour,
j'aurai besoin de vos lumières en javascript, je suppose que ce n'est pas grand chose mais je ne trouve pas. Voila un petit script qui me permet de modifier l'apparition de menus deroulants dont les données sont liées les unes aux autres (façon ajax). J'ai 4 menus deroulants liés. Si je choisi une valeur dans le premier il m'affiche le deuxieme avec les valeurs correcpondant à la donnée choisi dans le premier. Si je choisi une valeur dans ce deuxieme, il m'affiche le troisieme avec la valeur correpondante au deuxieme, ainsi de suite. Apres avoir selectionné mes 4 valeurs de mes 4 menus je choisi de modifier la première valeur par exemple, seul le deuxieme menu se modifie les deux autres garde leurs valeurs selectionnées. Et ca ca me pose probleme, je voudrais qu'en changeant la valeur du premier les trois suivants se reinitialisent, ou en changeant la valeur du troisieme que le quatrieme se reinititialise, ...
Si vous pouvez jeter un oeil au code, je pense que ce n'est pas grand chose mais je ne trouve pas ... merci beaucouooooooooooop

---- 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
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
<script type="text/javascript">
var Ld1Id='';
var Ld2Id='';
var Ld3Id='';
var id_liste='';
 
function ValideLd2(val) {
        // pnj_theme_ref
        Ld1Id=val;
        // Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante ici la '2'
        id_liste='2';
        // CARIABLE LD_URL => Donne l'adresse envoyé en GET caché 
        var LD_URL = 'ValideLd2.php?Ld1='+Ld1Id;
        // PERMET LE RECHERGEMENT CACHÉ
        ObjetXHR(LD_URL)
        // Réinitialisation de Ld3 si modification de LD1 après passage en Ld2
        if (Ld2Id!=''){ValideLd3('');
        }
}
 
function ValideLd3(val) {
        Ld2Id=val; //id_commune
        id_liste='3'; //Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
        var LD_URL = 'ValideLd3.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id;
//      if (Ld3Id!='') {var LD_URL = 'ValideLd4.php';}  
        ObjetXHR(LD_URL)
        if (Ld3Id!=''){ValideLd4('');}
}
 
function ValideLd4(val) {
        Ld3Id=val; //id_commune
        id_liste='4'; //Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
        var LD_URL = 'ValideLd4.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id+'&Ld3='+Ld3Id;
        if (Ld3Id=='') {var LD_URL = 'ValideLd4.php';}  
        ObjetXHR(LD_URL)
}
 
function ObjetXHR(LD_URL) {
        //creation de l'objet XMLHttpRequest
        if (window.XMLHttpRequest) { // Mozilla,...
                xmlhttp=new XMLHttpRequest();
                if (xmlhttp.overrideMimeType) {
                        xmlhttp.overrideMimeType('text/xml');
                }       
                xmlhttp.onreadystatechange=ChargeLd;
                xmlhttp.open("GET", LD_URL, true);
                xmlhttp.send(null);
        } else if (window.ActiveXObject) { //IE 
                xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
                if (xmlhttp) {
                        xmlhttp.onreadystatechange=ChargeLd;
                        xmlhttp.open('GET', LD_URL, false);
                        xmlhttp.send();
                }
        }
        // Bouton non apparent car modification de LD1 ou Ld2
        document.getElementById('buttons').style.display='none';
}
 
// fonction pour manipuler l'appel asynchrone
function ChargeLd() {
        if (xmlhttp.readyState==4) { 
                if (xmlhttp.status==200) { 
                        //span id="niv2" ou "niv3"
                        document.getElementById('niv'+id_liste).innerHTML=xmlhttp.responseText; 
                        if (xmlhttp.responseText.indexOf('disabled')<=0) {
                                //focus sur liste déroulante 2 ou 3
                                document.getElementById('Liste'+id_liste).focus(); 
                        }       
                }
        }
}
 
function Affiche_Btn() {
        document.getElementById('buttons').style.display='inline';
}
</script>

**d-Rek** · 27/02/2008, 09h50

En plus de tes autres fonctions essaye ça..
Dans tes autres fonctions, je suppose que tu t'occupes de virer les anciennes option de tes select ?

Code Javascript :

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

1
2
3
4
5
6
7
8
9
 
function merci_derek(i){
	if(i==1){
		document.getElementById('act2').style.display='block';
		document.getElementById('act3').style.display='none';
	}else if(i==2){
		document.getElementById('act3').style.display='block';
	}
}

Code HTML :

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

1
2
3
4
5
<form action="toto.html" name="developpez" method="post" style="padding:0px; margin:0px;">
<div id="act1">Ce code est : <select onchange="merci_derek(1);" name="select1"><option value="0">Utile</option><option value="1">Nickel</option><option value="2">Parfait</option></select></div><br>
<div id="act2" style="display:none;">En effet, d-Rek est : <select onchange="merci_derek(2);" name="select2"><option value="0">Génial</option><option value="1">Trop cool</option><option value="2">Parfait</option></select></div><br>
<div id="act3" style="display:none;">Normal ! Ce forum est : <select name="select3"><option value="0">Génial</option><option value="1">Trop cool</option><option value="2">le meilleur</option></select></div>
</form>

PS : j'ai pas testé mais ça devrait fonctionner

**grandpa006** · 27/02/2008, 12h45

Salut,
Je te donne ma page html puis mes 4 insertions php, car ce ne sont pas de simples select (recuperation a partir de ma base mysql) et j'ai peur que mon niveau de javascript ne m'aide pas enormement. En tout cas merci beaucoup de t'etre penché sur mon probleme, merci.
Pascal

--------------- LA PAGE CONTENANT LES SELECT ET LE JAVASCRIPT ------

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
 
<form enctype="multipart/form-data" action="pnj_ajout_article02.php" method="post">
    <table width="90%" border="0" align="center" cellpadding="10" cellspacing="1" bgcolor="8F8368">
      <tr>
        <td bgcolor="#FFFFFF">
 
        <div id="Les3LD">
 
        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="3">
            <tr>
              <td height="1" colspan="2"><div align="left"><font color="#999999" size="2" face="Verdana, Arial, Helvetica, sans-serif">FAITES
                VOTRE CHOIX</font></div></td>
            </tr>
            <tr>
              <td height="1" colspan="2" background="<?php echo $img_extra_images ?>ip_point.gif"><img border="0" src="<?php echo $img_extra_images ?>ip_point.gif" align="absmiddle" /></td>
            </tr>
            <tr valign="middle">
              <td width="150"><div align="right" class="texte01">Th&egrave;me : &nbsp; </div></td>
              <td><?php include 'ValideLd1.php'; ?></td>
            </tr>
            <tr valign="middle">
              <td><div align="right" class="texte01">Sous Th&egrave;me 01 : &nbsp; </div></td>
              <td><span id="niv2" class="Texte_Article"><?php include 'ValideLd2.php'; ?></span></td>
            </tr>
            <tr valign="middle">
              <td><div align="right" class="texte01">Sous Th&egrave;me 02 : &nbsp; </div></td>
              <td><span id="niv3" class="Texte_Article"><?php include 'ValideLd3.php'; ?></span></td></tr>
            <tr valign="middle">
              <td><div align="right" class="texte01">Sous Th&egrave;me 03 : &nbsp; </div></td>
              <td><span id="niv4" class="Texte_Article"><?php include 'ValideLd4.php';  ?></span></td>
            </tr>
        </table>
        </div></td>
      </tr>
    </table>    
    <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><table width="100%" border="0" align="center" cellpadding="1" cellspacing="0">
          <tr>
            <td align="left"><!-- <a href="index.php?menu=iv_database_menu"><img border="0" src="<?php echo $img_extra_images ?>iv_precedent.gif" /></a> -->              <input name="envoi2" type="submit" class="Texte_Article" id="envoi2" value="Page Suivante &gt;&gt;" /></td>
 
          </tr>
        </table></td>
      </tr>
    </table>
    </form>

--------------- LE PREMIER INCLUDE 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
 
<?PHP
// VALIDE LD1 ////////////////////////////////
// CONNEXION BDD
include 'Connexionbd.php';
 
// REQUETE AFFICHAGE PREMIER MENU DEROULANT
	$rq="SELECT pnj_theme_ref,pnj_theme_txt FROM pnj_theme ORDER BY pnj_theme_txt";
 
	$rq_pos_id=0; //position dans le SQL de la clé de la liste déroulante idem dans ValideLd2.php et ValideLd3.php
	$rq_pos_val=1; //position dans le SQL de la valeur de la liste déroulante idem dans ValideLd2.php et ValideLd3.php 
 
$result= mysql_query ($rq) or die ("Select impossible");
 
// LISTE DÉROULANTE CONCERNANT LES THEMES
$retour = '<select class="Texte_Article" name="Liste1" id="Liste1" size="1" onchange="ValideLd2(this[this.selectedIndex].value);">';
$retour .= '<option selected value="">Choisir un Th&egrave;me...</option>';
 
// SI LE RESULTAT EXISTE
if (mysql_num_rows($result) != 0)
	{
	while ($row = mysql_fetch_row($result))
	{
	$retour .= '<option value="'. $row[$rq_pos_id] .'">'. htmlentities($row[$rq_pos_val]) .'</option>';
	}
	$retour .= '</select>';
	}
else
	{
	$retour = '<input id="size" type="text" size="10" value="Aucune valeur" disabled>';
	}
 
mysql_free_result($result);
mysql_close($connexion);
// AFFICHE LE MENU DEROULANT
echo $retour
?>

--------------- LE DEUXIEME INCLUDE 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
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
 
<?PHP
// VALIDE LD2 ////////////////////////////////
// CONNEXION BDD
include 'Connexionbd.php';
 
// pnj_theme_ref clé de la liste déroulante 1
$Ld1_retour =''; 
 
// SI VARIABLE Ld1 TRANSMISE EN GET EXISTE
if (isset($_GET['Ld1']))
	{
	$Ld1_retour = $_GET['Ld1']; // Ldl_retour = VALEUR DE ld1 transmise
	}
 
// SI VARIABLE ldl_retour N'EXISTE DIFFERENTE DE VIDE
if ($Ld1_retour!='')
	{
 
	// REQUETE AFFICHAGE DEUXIEME MENU DEROULANT
	$rq="SELECT pnj_sstheme01_ref,pnj_sstheme01_txt FROM pnj_sstheme01 WHERE pnj_theme_ref=".$Ld1_retour." ORDER BY pnj_sstheme01_txt";
	$rq_pos_id=0;
	$rq_pos_val=1;
	$result= mysql_query ($rq) or die ("Select impossible");
	$retour = '<select class="Texte_Article" name="Liste2" id="Liste2" size="1" onchange="ValideLd3(this[this.selectedIndex].value);">';
	$retour .= '<option selected value="">Choisir un Sous-Theme ... </option>';
 
	if (mysql_num_rows($result) != 0)
		{
		while ($row = mysql_fetch_row($result))
			{
			$retour .= '<option value="'. $row[$rq_pos_id] .'">'. htmlentities($row[$rq_pos_val]) .'</option>';
			}
			$retour .= '</select>';
		}
	else
		{
		$retour = '<input class="Texte_Article" id="Liste2" type="text" size="10" value="Aucune valeur" disabled>';
		}
 
	mysql_free_result($result);
 
}
else
	{
	$retour = '<select name="Liste2" id="Liste2" size="1" disabled><option>Aucune valeur</option></select>';
	}	
 
echo $retour
?>

--------------- LE TROISIEME INCLUDE 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<?PHP
// VALIDE LD3 ////////////////////////////////
 
// CONNEXION BDD
include 'Connexionbd.php';
 
$Ld1_retour =''; //pnj_theme_ref clé de la liste déroulante 1 
$Ld2_retour =''; //pnj_sstheme01_ref de la liste déroulante 2	
 
if (isset($_GET['Ld1'])) {$Ld1_retour = $_GET['Ld1'];}
if (isset($_GET['Ld2'])) {$Ld2_retour =  $_GET['Ld2'];}
 
if (($Ld1_retour!='')&&($Ld2_retour!=''))
{
	// REQUETE AFFICHAGE DEUXIEME MENU DEROULANT
	$rq="SELECT pnj_sstheme02_ref,pnj_sstheme02_txt FROM pnj_sstheme02 WHERE pnj_theme_ref=".$Ld1_retour." AND pnj_sstheme01_ref=".$Ld2_retour." ORDER BY pnj_sstheme02_txt";
	$rq_pos_id=0;
	$rq_pos_val=1;
	$result= mysql_query ($rq) or die ("Select impossible");
	$retour = '<select class="Texte_Article" name="Liste3" id="Liste3" size="1" onchange="ValideLd4(this[this.selectedIndex].value);">';
	$retour .= '<option selected value="">Choisir un Sous-Sous Thème ...</option>';
 
	if (mysql_num_rows($result) != 0)
	{
		while ($row = mysql_fetch_row($result))
		{
		$retour .= '<option value="'. $row[$rq_pos_id] .'">'. htmlentities($row[$rq_pos_val]) .'</option>';
		}
	$retour .= '</select>';
	}
	else
	{
	$retour = '<input id="Liste3" type="text" size="10" value="Aucune valeur" disabled>';
	}
	mysql_free_result($result);
}else{
	$retour = '<select class="Texte_Article" name="Liste3" id="Liste3" size="1" disabled><option>Aucune valeur</option></select>';
}	
echo $retour
?>

--------------- LE QUATRIEME INCLUDE 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<?PHP
// VALIDE LD4 ////////////////////////////////
// CONNEXION BDD
include 'Connexionbd.php';
 
$Ld1_retour =''; //pnj_theme_ref clé de la liste déroulante 1 
$Ld2_retour =''; //pnj_sstheme01_ref de la liste déroulante 2	
$Ld3_retour =''; //pnj_sstheme02_ref de la liste déroulante 2	
 
if (isset($_GET['Ld1'])) {$Ld1_retour = $_GET['Ld1'];}
if (isset($_GET['Ld2'])) {$Ld2_retour =  $_GET['Ld2'];}
if (isset($_GET['Ld3'])) {$Ld3_retour =  $_GET['Ld3'];}
 
if (($Ld1_retour!='')&&($Ld2_retour!='')&&($Ld3_retour!=''))
{
	// REQUETE AFFICHAGE TROISIEME MENU DEROULANT
$rq="SELECT pnj_sstheme03_ref,pnj_sstheme03_txt FROM pnj_sstheme03 WHERE pnj_theme_ref=".$Ld1_retour." AND pnj_sstheme01_ref=".$Ld2_retour." AND pnj_sstheme02_ref=".$Ld3_retour." ORDER BY pnj_sstheme03_txt";
	$rq_pos_id=0;
	$rq_pos_val=1;
	$result= mysql_query ($rq) or die ("Select impossible");
	$retour = '<select class="Texte_Article" name="Liste4" id="Liste4" size="1">';
	$retour .= '<option selected value="">Choisir un Sous-Sous-Sous Thème ...</option>';
 
	if (mysql_num_rows($result) != 0)
	{
		while ($row = mysql_fetch_row($result))
		{
		$retour .= '<option value="'. $row[$rq_pos_id] .'">'. htmlentities($row[$rq_pos_val]) .'</option>';
		}
	$retour .= '</select>';
	}
	else
	{
	$retour = '<input id="Liste4" type="text" size="10" value="Aucune valeur" disabled>';
	}
	mysql_free_result($result);
}else{
	$retour = '<select class="Texte_Article" name="Liste4" id="Liste4" size="1" disabled><option>Aucune valeur</option></select>';
}	
echo $retour
?>

**d-Rek** · 27/02/2008, 19h43

Ce n'est pas un problème de PHP.
Tu cherche un traitement côté client.
Ce n'est pas dans ton intérêt de te "mâcher" le boulot et puis j'avoue que j'ai la flem de compléter ton code.
Creuse un peu la solution que je t'apporte.

D'ailleurs je la paufine :

Code HTML :

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

1
2
3
4
5
<form action="toto.html" name="developpez" method="post" style="padding:0px; margin:0px;">
<div id="act1">Ce code est : <select onchange="merci_derek(1);" name="select1"><option value="0">Utile</option><option value="1">Nickel</option><option value="2">Parfait</option></select></div><br>
<div id="act2" style="display:none;">En effet, d-Rek est : <select onchange="merci_derek(2);" name="select2" disabled><option value="0">Génial</option><option value="1">Trop cool</option><option value="2">Parfait</option></select></div><br>
<div id="act3" style="display:none;">Normal ! Ce forum est : <select name="select3" disabled><option value="0">Génial</option><option value="1">Trop cool</option><option value="2">le meilleur</option></select></div>
</form>

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
function merci_derek(i){
	if(i==1){
		document.getElementById('act2').style.display='block';
		document.getElementById('act3').style.display='none';
		document.developpez.select2.disabled=false;
		document.developpez.select3.disabled=true;
	}else if(i==2){
		document.getElementById('act3').style.display='block';
		document.developpez.select3.disabled=false;
	}
}

C'est en forgeant qu'on devient forgeron

Allez courage !

4 Menus déroulants liés - Petit bug

JavaScript

Vue hybride

Discussions similaires

Partager

Partager