Javascript: lien avec une dropdown box

**J_help** · 11/02/2010, 17h09

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 ?

**SpaceFrog** · 11/02/2010, 17h16

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

**J_help** · 16/02/2010, 17h14

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

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

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

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

.

Comment je fais ça facilement ?

**J_help** · 17/02/2010, 18h15

J ai tenté ca mais ca marche pas.

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

**vermine** · 18/02/2010, 07h55

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 :

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

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 :

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

1
2
3
4
5
function afficher(variable1)
{
   document.getElementById('ici').innerHTML = variable1;
}

**J_help** · 18/02/2010, 20h17

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 !

**vermine** · 19/02/2010, 07h37

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 :

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

**J_help** · 22/02/2010, 21h11

Merci beaucoup !

**J_help** · 23/02/2010, 17h58

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 :

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
 
<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">&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.option[document.form1.select1.selectedIndex].value)"> 
</FORM>
<table>
<tr>
  <td id="prop1_1"></td>
</tr> 
</table>
</body>
</html>

Avec le Aircraft.js suivant

Code :

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

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 !

**vermine** · 24/02/2010, 07h55

D'accord,

Tout d'abord, vous avez votre select:

Code :

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

1
2
3
4
5
6
 
<SELECT name="select1" id="selectavion1">
<OPTION value="0">&nbsp;</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 :

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

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 :

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

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 :

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

1
2
 
var Aircraft = new Array("&nbsp;","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.

**J_help** · 24/02/2010, 15h16

Merci beaucoup pour tout !

**J_help** · 26/02/2010, 00h01

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

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

**vermine** · 26/02/2010, 07h47

Vous avez l'air de tenir à votre:

Code :

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

1
2
 
options.selectedIndex

Et si vous testiez:

Code :

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

1
2
 
onclick="selectAvion(document.form1.select1.value);"

Car je ne sais pas trop ce que vous récupérer avec votre syntaxe.

**J_help** · 26/02/2010, 14h58

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

**vermine** · 26/02/2010, 15h11

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.

**J_help** · 26/02/2010, 15h40

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 !

Javascript: lien avec une dropdown box

JavaScript

Discussions similaires

Partager

Partager