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

Citation:

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

Citation:

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

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 :

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>

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

Auteur · 15/02/2011, 11h09

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

10/02/2011, 17h42	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 805 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 805 Points : 35 810 Points : 35 810	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é ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

11/02/2011, 09h13	#5
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email