Discussion :

[allan599]

Bonjour,

J'ai développé une page qui se compose essentiellement de listes déroulantes.
J'ai donc une première liste qui permet de choisir le support, une deuxième qui affiche le format du support en fonction du support choisi, et une troisième liste qui permet de choisir le poids du support (s'actualise également en fonction du support).

J'arrive donc à changer les <option> de mes deux dernières listes, j'arrive également à récupérer les valeurs de la liste 'support' et 'format support', mais pas celle du 'poids support'...

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
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
 
//premiere liste déroulante 
 Selectionnez votre type de support:<br> 
    <SELECT id=listeA onChange=changeliste() name=listeA style="width:300px;">  
     <OPTION selected value=<?php if(isset($_GET['1']) and $_GET['1']!='aucun') echo $_GET['1']; else echo "aucun";?>><?php if(isset($_GET['1']) and $_GET['1']!='aucun') echo $tab[$var];else echo '-----------Choisissez votre type de support----------';?></OPTION> 
     <OPTION value=0 >Affiches</OPTION>   
     <OPTION value=1>Cartes de visite</OPTION>  
     <OPTION value=2>dépliants</OPTION>  
     <OPTION value=3>flyers</OPTION>         
 
    </SELECT></p><br><br> 
 
//deuxieme liste déroulante 
<p style="text-align:center;"> 
    Selectionner le format:<br> 
    <A id=listeB_div style="text-align:center;"> 
    <SELECT id=listeB name=listeB onChange=changeliste() style="width:300px;"> 
     <OPTION selected value="<?php if(isset($_GET['2']) and $_GET['2']!='aucun') echo $_GET['2']; else echo "aucun";?>"><?php if(isset($_GET['2']) and $_GET['2']!='aucun') echo $_GET['2'];else echo '---------------Choisissez votre format------------';?></OPTION> 
    </SELECT></a><br> 
 
//Troisième liste déroulante 
<p style="text-align:center;"> 
    Selectionner le grammage:<br> 
    <A id=gram style="text-align:center;"> 
    <SELECT id=listeC name=listeC onChange=changeliste2() style="width:300px;"> 
     <OPTION selected value="<?php if(isset($_GET['3']) and $_GET['3']!='aucun') echo $_GET['3']; else echo "aucun";?>"><?php if(isset($_GET['3']) and $_GET['3']!='aucun') echo $_GET['3'];else echo '---------------Choisissez votre grammage------------';?></OPTION> 
    </SELECT></a><br> 
 
//Code Javascript associé à la deuxieme liste déroulante 
liste=new Array(); 
liste[0] = new Array("A4 : 21,0 x 29,7 cm","A3 : 29,7 x 42,0 cm","autre format"); 
liste[1] = new Array("Simple : 8,5 x 5,5 cm","Double : 17,0 x 5,5 cm","Double : 8,5 x 11,0 cm","Triple : 25,5 x 5,5 cm","autre format"); 
liste[2] = new Array("Format ouvert A6 : 10,5 x 14,8 cm","Format ouvert A5 : 14,8 x 21,0 cm","Format ouvert A4 : 21,0 x 29,7 cm","Format ouvert A3 : 29,7 x 42,0 cm","autre format"); 
liste[3] = new Array("10,0 x 10,0 cm","A6 : 10,5 x 14,8 cm","10,0 x 20,0 cm","A5 : 14,8 x 21,0 cm","20,0 x 20,0 cm","A4 : 21,0 x 29,7 cm","A3 : 29,7 x 42,0 cm","autre format"); 
 
 
 
choix_support=document.getElementById("listeA").value; 
t='<SELECT id=listeB name=listeB onChange=affichecase() style="width:300px;">'; 
 for(i=0;i<liste[choix_support].length;i++) 
 { 
  t+="<option value=\""+liste[choix_support][i]+"\">"+liste[choix_support][i]+"</option>";   
 } 
 document.getElementById("listeB_div").innerHTML=t+'</select>'; 
 
//code associé à la deuxieme liste déroulante 
 
liste2=new Array(); 
liste2[0] = new Array("090gr couché brillant","90gr satimat","135gr couché brillant","135gr satimat","170gr couché brillant","170gr satimat","250gr couché brillant","250gr satimat","350 couché brillant","350gr satimat"); 
liste2[1] = new Array("350 couché brillant","350gr satimat"); 
liste2[2] = new Array("090gr couché brillant","90gr satimat","135gr couché brillant","135gr satimat","170gr couché brillant","170gr satimat"); 
liste2[3] = new Array("090gr couché brillant","90gr satimat","135gr couché brillant","135gr satimat","170gr couché brillant","170gr satimat","250gr couché brillant","250gr satimat","350 couché brillant","350gr satimat"); 
 
 choix_support=document.getElementById("listeA").value; 
 a='<SELECT id=listeC name=listeC onChange=changeliste2() style="width:300px;">'; 
 for(i=0;i<liste2[choix_support].length;i++) 
 { 
  a+="<option value=\""+liste2[choix_support][i]+"\">"+liste2[choix_support][i]+"</option>";   
 } 
 document.getElementById("gram").innerHTML=a+'</select>';

Je précise que le code fonctionne parfaitement sur IE mais pas sous chrome et Firefox...
Merci d'avance de vos lumières!

[RomainVALERI]

1) Y a-t-il une raison pour laquelle pratiquement aucune de tes valeurs d'attributs HTML n'est entourée de guillemets ? ^^

2) As-tu essayé de créer ton select par le DOM plutot qu'en constituant une chaine que tu envoies dans l'innerHTML de l'élément parent ?

3) tu n'utilises que des globales ?

[allan599]

RomainVALERI:
1 - Non il n'y a aucune raison en particulier, il me semble que les quote ne sont nécessaires que quand c'est une chaine composée (du style "ma valeur") donc je ne les quote pas toujours.

2 - J'ai vu vaguement la méthode du DOM, mais je n'y connais rien et je comprend pas trop comment cela fonctionne

3 - Oui j'utilise en grande partie des variables globales, mais je ne pense pas que cela puisse affecter la compatibilité si?

[RomainVALERI]

1 - Non il n'y a aucune raison en particulier, il me semble que les quote ne sont nécessaires que quand c'est une chaine composée (du style "ma valeur") donc je ne les quote pas toujours.

Tu ne fais donc pas de XHTML mais du HTML. Aucun mal à ça. (ça me fait toujours un peu bizarre, par contre, mais c'est totalement irrationnel j'en conviens ^^)

2 - J'ai vu vaguement la méthode du DOM, mais je n'y connais rien et je comprend pas trop comment cela fonctionne

>>> jette un oeil par ici

3 - Oui j'utilise en grande partie des variables globales, mais je ne pense pas que cela puisse affecter la compatibilité si?

Mmm... non a priori pas... mais bon... le JS est un langage à la fois puissant et dangereux... un peu de rigueur ne fait pas de mal. Déclare toutes tes variables avec "var" SAUF SI tu as réellement besoin d'accéder à ta variable hors du scope de la fonction courante ET que tu ne sais pas faire autrement qu'en passant par une globale. Ce n'est bien entendu pas une "obligation", mais il y a trop de bugs liés à la portée des variables qui ont poussé des développeurs web à la défénestration, alors bon... je préviens

[allan599]

Ok j'attends ca alors pour y jeter un oeil, en attendant j'ai bricolé une petite solution : j'injecte la valeur de ma liste déroulante dans une textbox invisible, et dans la page qui traite mon formulaire je récupère la valeur de cette texbox..
Ca marche et c'est l'essentiel, mais bon c'est de la bidouille quoi et j'aime pas trop ca