Javascript: lien avec une dropdown box

Version imprimable

11/02/2010, 17h09
J_help

Javascript: lien avec une dropdown box

Bonjour,
Je suis débutant en javascript et j aimerai realiser le projet suivant.

Faire un tableau comparatif de differents produits. L utilisateur selectionne des produits dans 4 dropdown boxes et les caracteristiques s affichent dans un tableau en dessous quand on appuie sur un bouton.

J aimerais savoir quelle architecture je dois donner à tout ça avant de me jeter dans le code lui meme.

Pour les produits je pensais definir des array avec leurs caracteristiques.
Puis creer une <TABLE>
Et dans chaque <td> definir un truc du genre "document.write=... .form.select.get avec id le selected.value[i]" en inscrivant en dur une valeur pour i qui correspond a la caracteristique que je cherche a afficher dans la cellule.

Le bouton cote des drop down fera actualiser les valeurs selected et changera les valeurs dans le tableau.

Je peux faire ca comme ca ?
11/02/2010, 17h16
SpaceFrog

deja pour te donner une idée :
http://www.developpez.net/forums/d47...hlight=tableau

Merci !
Alors je commence doucement par contre, je veux faire un bouton qui permet de choisir quelle array va etre selectionnee.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <HTML> <HEAD> <script type="text/javascript"> var Matrice=new Array(); Matrice[0]="value1"; var Matrix=new Array(); Matrix[0]="value2"; </script> </HEAD> <BODY> <FORM name="form1"> <SELECT name="select1"> <OPTION>Matrice <OPTION>Matrix </SELECT> <INPUT type="button" name="go" Value= "Go!" onclick="remplace dans le code en bas ??? par Matrice ou Matrix"> </FORM> <script type="text/javascript"> document.write(???[0]); </script> </BODY> </HTML>
En gros un drop down, un bouton, si on appuie sur le bouton cela determine la valeur ??? pour mettre dans

Code:

document.write(???[0]);

.

Comment je fais ça facilement ?

J ai tenté ca mais ca marche pas.

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
 
<HTML>
<HEAD>
 
<script type="text/javascript">
var Matrice=new Array();
Matrice[0]="value matrice 1";
Matrice[1]="value matrice 2";
var Matrix=new Array();
Matrix[0]="value matrix 1";
Matrix[1]="value matrix 2";
</script>
 
<script type="text/javascript">
function afficher(variable1)
document.getElementById('ici').innerHTML = variable1[0];
document.getElementById('la').innerHTML =varaible1[1];
</script>
 
</HEAD>
<BODY>
 
<FORM name="form1">
<SELECT name="select1">
<OPTION >&nbsp;</OPTION >
<OPTION value="MATRICE">Matrice</OPTION >
<OPTION value="MATRIX">Matrix</OPTION >
</SELECT>
<INPUT type="button" name="go" Value= "Go!" onclick="afficher(document.form1.select1.option[document.form1.select1.selectedIndex].value)">
</FORM>
 
<p>Text: <br>
<SPAN id="ici">&nbsp;</SPAN><br>
<SPAN id="la">&nbsp;</SPAN><br>
</p>
 
</BODY>
</HTML>

18/02/2010, 07h55
vermine
Bonjour,

Alors je n'ai pas bien compris pourquoi vous affichez deux valeurs dans votre fonction. Vous n'en sélectionnez qu'une, non ? Alors vous prenez le value du select:
Code:

1 2 <INPUT type="button" name="go" value= "Go!" onclick="afficher(document.form1.select1.value);">
Ensuite, il y a une erreur de syntaxe lors de la création de votre fonction. Un simple oubli:
Code:

1 2 3 4 5 function afficher(variable1) { document.getElementById('ici').innerHTML = variable1; }
18/02/2010, 20h17
J_help

Merci !
En fait ce que je cherche a faire, c est une fonction qui affiche toutes les valeurs contenues dans une array a des endroits precis de ma page.

Le process est le suivant:
une drop down avec des noms d array
un bouton de validation
une fonction qui recupere le nom selectionné de l array et qui fait afficher les valeurs contenues dans cette array.

Merci encore pour l aide apportée !

Il y a peut-être moyen de faire autrement pour ne pas devoir faire de if mais je n'en suis pas certain. Alors en attendant, vous pouvez essayer ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function afficher(variable1)
{
   if(variable1 == "MATRICE"
   {
       for(var i=0; i<Matrice.length; i++)
       {
           document.getElementById('ici').innerHTML += Matrice[i] + "<br>";
       }
   }
   else
   {
       for(var i=0; i<Matrix.length; i++)
       {
           document.getElementById('la').innerHTML += Matrix[i] + "<br>";
       }       
   }
}

Je récupère le value du select et je parcours le tableau qui lui correspond.

22/02/2010, 21h11
J_help

Merci beaucoup !

En fait j'essaie de glaner des infos a droites a gauche en gardant un truc assez simple et de faire un truc par moi meme en glanant des infos a droite a gauche (parce que c est comme ça qu on apprend).

Donc en fait dans un premier tamps le tableau va pas etre cree dynamiquement mais juste rempli (ca sera le step 2 pour la creation dynamique mais un probleme a la fois).

Et vous allez peut etre trouver que j'abuse a pas suivre exactement vos conseils mais je suis toujours en train d apprendre et du coup c est plus pedagogique pour moi
Merci de votre patience.

Donc la j en suis toujours a "ca marche pas" et "je comprends pas dans ma tete ca marche"
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 <html> <head> <script type="text/javascript" src="Competition/Aircraft.js"></script> <script type="text/javascript"> function selectAvion(avion) { document.getElementById("prop1_1").innerhtml = Aircraft[avion]; } </script> </style> </head> <body> <FORM name="form1"> <SELECT name="select1" id="selectavion1"> <OPTION value="0"> </OPTION> <OPTION value="1">ARJ21-700</OPTION> <OPTION value="2">ARJ21-700 ER</OPTION> </SELECT> <INPUT type="button" name="go" Value= "Go!" onclick="selectAvion(document.form1.select1.option[document.form1.select1.selectedIndex].value)"> </FORM> <table> <tr> <td id="prop1_1"></td> </tr> </table> </body> </html>
Avec le Aircraft.js suivant

Code:

var Aircraft=["nspb;","ARJ21-700","ARJ21-700 ER"];

En gros quand l utilisateur clique sur le bouton, ca devrait aller chercher la ligne selectionnee dans la dropbox, recuperer le n* de la ligne et aller chercher l element avec le meme numero dans l array, et afficher le nom qui s y trouve.

Merci !

24/02/2010, 07h55
vermine

Enseignons
D'accord,

Tout d'abord, vous avez votre select:
Code:

1 2 3 4 5 6 <SELECT name="select1" id="selectavion1"> <OPTION value="0"> </OPTION> <OPTION value="1">ARJ21-700</OPTION> <OPTION value="2">ARJ21-700 ER</OPTION> </SELECT>
Vous désirez récupérer 0, 1 ou 2. C'est-à-dire le value.
Donc, dans le onclick, c'est bel et bien ceci qu'il vous faut:
Code:

1 2 onclick="selectAvion(document.form1.select1.value);"
Car la valeur sélectionnée (le value du select) est le value de l'option sélectionnée.

Ensuite, dans votre fonction il y a une erreur de casse. Le Javascript est sensible aux majuscules-minuscules:
Code:

1 2 document.getElementById("prop1_1").innerHTML = Aircraft[avion];
Ici, on voit que vous utilisez un tableau d'avions et que vous lui passez l'indice (la position de l'avion dans le tableau). Vous pouvez alors déclarer votre tableau ainsi:
Code:

1 2 var Aircraft = new Array(" ","ARJ21-700","ARJ21-700 ER");
J'ai également corrigé le &nspb; car c'est en fait  .

Si vous avez d'autres questions, n'hésitez pas.
24/02/2010, 15h16
J_help

Merci beaucoup pour tout !

Probleme suivant
Je definis deux cases et je veux afficher une valeur dans chacune des cases

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
<html>
<head>
<script type="text/javascript" src="Competition/Aircraft.js"></script>
<script type="text/javascript" src="Competition/AAircraft.js"></script>
<script type="text/javascript">
 
function selectAvion(avion) 
{
	document.getElementById("prop1_1").innerHTML = Aircraft[avion];
	document.getElementById("prop1_2").innerHTML = AAircraft[avion];
}
</script>
</head>
<body>
 
<FORM name="form1">
<SELECT name="select1">
<OPTION value="0">&nbsp;</OPTION>
<OPTION value="1">ARJ21-700</OPTION>
<OPTION value="2">ARJ21-700 ER</OPTION>
</SELECT>
<INPUT type="button" name="go" Value= "Go!" onclick="selectAvion(document.form1.select1.options.selectedIndex)"> 
</FORM>
 
<table>
<tr>
  <td id="prop1_1" style='border:solid windowtext 0.1pt'>&nbsp;</td>
  <td id="prop1_2" style='border:solid windowtext 0.1pt'>&nbsp;</td>
</tr> 
</table>
</body>
</html>

Je m attends a ce qu il mette dans "prop1_1" le valeur de Aircraft[i] et dans "prop1_2" le valeur de AAircraft[i].

Et ben non il met AAircraft[i] dans "prop1_1" et rien dans "prop1_2".

Et là je suis perdu one more time !

26/02/2010, 07h47
vermine
Vous avez l'air de tenir à votre:
Code:

1 2 options.selectedIndex
Et si vous testiez:
Code:

1 2 onclick="selectAvion(document.form1.select1.value);"
Car je ne sais pas trop ce que vous récupérer avec votre syntaxe. :)
26/02/2010, 14h58
J_help

Bonjour !
J ai fait le changement indiqué mais j ai toujours le même probleme: la valeur qui aurait du etre dans la case2 est dans la case1 de mon tableau et la case 2 est vide
26/02/2010, 15h11
vermine

Etes-vous sûr que vos fichiers JS sont correctes ? J'ai testé votre code, en remettant les deux tableaux Aircraft dans ma page (le AA étant une copie du A où j'ai ajouté un caractère en fin de chaque valeur pour reconnaitre le tableau A du tableau AA) et les bonnes valeurs s'affichent dans les bonnes cases. :?
26/02/2010, 15h40
J_help

Merci !
Je suis un idiot j etais tellement "concentré" sur mon code que j ai pas vu la typo dans le nom de la matrice...
Vraiment désolé et encore merci pour l'aide !