Aide liste déroulante en html et Javascript uniquement

**taz15** · 10/02/2011, 16h42

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 :

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

**Bovino** · 10/02/2011, 17h42

Code :

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

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

this.supp ?

C'est quoi au juste cette propriété ?

**taz15** · 10/02/2011, 22h37

Envoyé par Bovino

Code :

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

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

**Auteur** · 10/02/2011, 23h48

bonsoir,

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

Code :

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

1
2
 
var i;

Code :

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

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

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 :

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

var txt;

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

- pour le HTML

Code html :

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

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

**Loceka** · 11/02/2011, 09h13

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

Sinon, pour ajouter une option il faut faire :

Code :

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

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.

**taz15** · 15/02/2011, 10h23

Envoyé par Auteur

bonsoir,

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

Code :

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

1
2
 
var i;

Code :

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

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

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 :

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

var txt;

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

- pour le HTML

Code html :

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

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

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

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 :

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