Aide liste déroulante en html et Javascript uniquement

Version imprimable

Bonjour,

Je debute en javascript, je voudrais realiser une liste déroulante liée sur 5 niveaux

Exemple : 1 choix de technique, 1 choix de format, 1 choix de support, Prix pour les choix choisis, puis délai pour le tout.

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<head><SCRIPT language="JavaScript">
<!--
function Choix(form) {
i = form.technique.selectedIndex;
form.formats.options.length=0;
Item = new Option("Choisissez une technique", "", false, false);
form.formats.options[0]=Item;
form.formats.selectedIndex = 0;
switch (i) {
case 1 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
case 2 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
case 3 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
case 4 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
case 5 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
case 6 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
case 7 : var txt = new Array ('5F - (35x27)','6F - (41x33))','8F - (46x38)','10F - (55x46)','12F - (61x50)','15F - (64x54)','20F - (73x60)','Autre format'); break;
case 8 : var txt = new Array ('75à80x1m70à1m80'); break;
case 9 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
}
 
for (i=0;i<txt.length;i++) {
  Item = new Option(txt[i], "4.html", false, false);
  form.formats.options[i+1]=Item;
  }
} 
 
 
 
 
// -->
</SCRIPT>
</head>
<body>
<FORM>
<p>
  <SELECT NAME="technique" size="1" onChange='Choix(this.form)'>
    <OPTION>--- Choisissez une technique ---</OPTION>
    <OPTION>Fusain</OPTION>
    <OPTION>Sanguine</OPTION>
    <OPTION>Mine de Plomb</OPTION>
    <option>2 craies</option>
    <option>Pastels</option>
    <option>Aquarelle</option>
    <option>Huile</option>
    <option>Portrait en pied </option>
    <option>Caricature </option>
  </SELECT>
</p>
<p>
  <select name="formats" onChange='Choix(this.supp)'>
    <option>--- Choisissez un format ---</option>
  </select>
</p>
<p>
  <SELECT NAME="support">
    <OPTION selected="selected">--- Choisissez un support ---</OPTION>
  </SELECT>
</p>
</html>

J'arrive à lier la 1ere colonne avec la 2eme, mais ensuite je bloque, pouvez vous me conseiller ? peut etre ça ne se fait pas comme ca

Merci

10/02/2011, 17h42
Bovino

Code:

<select name="formats" onChange='Choix(this.supp)'>

this.supp ? :?
C'est quoi au juste cette propriété ?
10/02/2011, 22h37
taz15

Citation:

Envoyé par Bovino

Code:

<select name="formats" onChange='Choix(this.supp)'>

this.supp ? :?
C'est quoi au juste cette propriété ?

Bonsoir,

oui c'était un test j'ai oublier l'effacer faut pas le prendre en compte dsl !
10/02/2011, 23h48
Auteur
bonsoir,

- pour le javascript :
déclare systématiquement tes variables.
Code:

1 2 var i;
Code:

1 2 3 4 5 case 1 : var txt = (.............) break; case 2 : var txt = (.............) break; case 3 : var txt = (.............) (.............)
:cry: :cry:
Et perds cette habitude de déclarer des variables au milieu du code cela t'évitera ces multiples déclarations d'une même et seule variable !
Ecris un

Code:

var txt;

au début de ta fonction et ton code gagnera en lisibilité. :ccool:

- pour le HTML
Code:

1 2 3 4 5 <OPTION>Sanguine</OPTION> <OPTION>Mine de Plomb</OPTION> <option>2 craies</option> <option>Pastels</option>
La norme est d'écrire les balises en minuscules ;)

Fin des critiques :mrgreen:
11/02/2011, 09h13
Loceka

Déjà t'as apparement pas mis tout ton code :?

Sinon, pour ajouter une option il faut faire :

Code:

form.formats.appendChild(Item) // avec un i minuscule ce serait mieux : item

Bien entendu le appendChild ne fonctionnera correctement qu'au premier appel. Après faudra supprimer toutes les options déjà existantes avant d'en remettre d'autres.

Citation:

Envoyé par Auteur

bonsoir,

- pour le javascript :
déclare systématiquement tes variables.

Code:

1
2
 
var i;

Code:

1
2
3
4
5
case 1 : var txt = (.............) break;
case 2 : var txt = (.............) break;
case 3 : var txt = (.............)
(.............)

:cry: :cry:
Et perds cette habitude de déclarer des variables au milieu du code cela t'évitera ces multiples déclarations d'une même et seule variable !
Ecris un

Code:

var txt;

au début de ta fonction et ton code gagnera en lisibilité. :ccool:

- pour le HTML

Code:

1
2
3
4
5
<OPTION>Sanguine</OPTION>
<OPTION>Mine de Plomb</OPTION>
<option>2 craies</option>
<option>Pastels</option>

La norme est d'écrire les balises en minuscules ;)

Fin des critiques :mrgreen:

Ok pour les minuscule, pour les variable je vois pas trop, si ta un petit exemple. Merci

Citation:

Déjà t'as apparement pas mis tout ton code

Sinon, pour ajouter une option il faut faire :
Code :
form.formats.appendChild(Item) // avec un i minuscule ce serait mieux : itemBien entendu le appendChild ne fonctionnera correctement qu'au premier appel. Après faudra supprimer toutes les options déjà existantes avant d'en remettre d'autres.

Avec cette fonction je pourrait liée plusieur liste ?

Merci

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Liste deroulante</title>
<head><SCRIPT language="JavaScript">
<!--
function Choix(form) {
i = form.technique.selectedIndex;
form.formats.options.length=0;
Item = new Option("Choisissez une technique", "", false, false);
form.formats.options[0]=Item;
form.formats.selectedIndex = 0;
switch (i) {
case 1 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
case 2 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
case 3 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
case 4 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
case 5 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
case 6 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
case 7 : var txt = new Array ('5F - (35x27)','6F - (41x33))','8F - (46x38)','10F - (55x46)','12F - (61x50)','15F - (64x54)','20F - (73x60)','Autre format'); break;
case 8 : var txt = new Array ('75à80x1m70à1m80'); break;
case 9 : var txt = new Array ('21x30 - (A4)','30x40 - (A3)','40x50','50x65','Autre format'); break;
}
 
for (i=0;i<txt.length;i++) {
  Item = new Option(txt[i], "4.html", false, false);
  form.formats.options[i+1]=Item;
  }
} 
 
 
 
 
// -->
</SCRIPT>
</head>
<body>
<form>
<p>
  <select name="technique" size="1" onChange='Choix(this.form)'>
    <option>--- Choisissez une technique ---</option>
    <option>Fusain</option>
    <option>Sanguine</option>
    <option>Mine de Plomb</option>
    <option>2 craies</option>
    <option>Pastels</option>
    <option>Aquarelle</option>
    <option>Huile</option>
    <option>Portrait en pied </option>
    <option>Caricature </option>
  </select>
</p>
<p>
  <select name="formats">
    <option>--- Choisissez un format ---</option>
  </select>
</p>
<p>
  <select name="support">
    <option>--- Choisissez un support ---</option>
  </select>
</p>
 
<p>
  <select name="tarif">
    <option>-- tarif --</option>
  </select>
</p>
<p>
  <select name="delais">
    <option>-- delais --</option>
  </select>
</p>
</form>
</html>

Re-voila mon code légerement coriger grace a vos réponse, je bloque toujours pour liée de la 2éme a la 3éme liste jusqu'au prix final.

Merci

15/02/2011, 11h09
Auteur

Citation:

Envoyé par taz15

Ok pour les minuscule, pour les variable je vois pas trop, si ta un petit exemple. Merci

Voici la raison pour laquelle je te conseille de déclarer systématiquement tes variables :
http://javascript.developpez.com/faq...arer-variables
;)