[DOM] comment utiliser onselect

**toma03** · 10/07/2007, 17h18

Bonjour a tous
je suis débutant en javascript (quelques heures....)
j'aimerais avoir la syntaxe pour faire apparaitre une deuxieme liste déroulante aprés la selection d'une valeur dans une liste déroulante .(listes déroulantes en cascade).

je sais qu'il faut utiliser onselect mais je sais pas trop comment m'en servire....

merci d'avance

**buzzkaido** · 10/07/2007, 17h28

Pour faire cela, il faut d'abord que tu apprennes à faire apparaitre/disparaitre des controles HTML.

Pour cela, il y a plusieurs methodes :

- document.write
- utiliser le DOM
- utiliser les proprietes machin.style.display="none";

Le plus simple etant la dernier solution.

Ensuite, une fois que tu sais faire ça (tu trouveras de nombreux exemples sur le net ou sur le forum) il suffit d'appeler ta fonction qui montre/cache la seconde liste dans le onSelect de la premiere liste :

Code :

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

<select ..... onSelect="montrerCacherDeuxiemeListe();">

Evidemment, tu peux ajouter des conditions dans la fonction montrerCacherDeuxiemeListe : verfier qu'un element est bien selectionné dans la premire liste, lequel...

**Matthieu2000** · 10/07/2007, 17h28

onChange

**buzzkaido** · 10/07/2007, 17h30

pardon, oui dans mon post precedent, il faut remplacer onSelect par onChange, c'est mieux !

Merci Matthieu2000 !

**toma03** · 10/07/2007, 17h49

merci je vais regarder tous ca de plus près ....

**toma03** · 10/07/2007, 19h15

J'ai cherché mais je n'ai réussi qu'a rediriger vers une autre page( automatiquement avec le onchange) mais pas a afficher une nouvelle liste deroulante en dessous ou a coté de la première.....

si qu'elqu'un peut me montrer un code qui marche , je pense par contre que je pourrai le comprendre assez facilement et le mdifier après comme je le souhaite ....

merci d'avance

**buzzkaido** · 11/07/2007, 09h13

Dans ta page, tu peux mettre une balise SELECT comme ça :

Code :

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

1
2
3
4
5
<select id="maListe" style="display: none;">
   <option value="0">Un truc</option>
   ....
   <option value="9">Un dernier truc</option>
</select>

Ensuite, en javascript, tu declares ces deux fonctions :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function afficherElement(idElement)
{
    document.getElementById(idElement).style.display = "block";
}
 
function cacherElement(idElement)
{
    document.getElementById(idElement).style.display = "none";
}

Maintenant, quand tu appelles afficherElement("maListe"); cela affiche ta liste, quand tu fais cacherElement("maListe"); la liste est.... cachée !

Il n'y a plus qu'a appeller cer 2 fonctions dans ton onChange();

Mais bon, quand je disais :

utiliser les proprietes machin.style.display="none";

tu aurais quand même pu chercher sur google... les exemples ne manquent pas.

http://www.google.fr/search?hl=fr&q=...e+Google&meta=

**toma03** · 11/07/2007, 21h26

Je suis désolé mais je suis vraiment débutant en JS , j'ai essayé ça mais quand je séléctionne une valeur dans ma première liste la deuxieme ne s'affiche pas .
Voici ce que j'ai essayé sans succés :

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
 
 
<head>
<body>
<select id="maListe" onChange="afficherElement(maliste)"  style="display:  block; >
 
   <option value="0">Un truc</option>
   ....
   <option value="9">Un dernier truc</option>
</select>
 
 
<script>
function afficherElement(idElement)
{
    document.getElementById(idElement).style.display = "block";
}
 
function cacherElement(idElement)
{
    document.getElementById(idElement).style.display = "none";
}
 
 
afficherElement(maliste);
</script>
</body>
</head>

**buzzkaido** · 12/07/2007, 09h05

Euh, oui, mais là tu as fais ça :

Code :

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

<select id="maListe" onChange="afficherElement(maliste)"  style="display:  block; >

Il ya deja une erreur de syntaxe :

Code :

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

<select id="maListe" onChange="afficherElement(maliste);"  style="display:  block;" >

Cette liste est affichée : display: block;

Et dans l'evenement onChange, tu veux l'afficher :

Code :

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

onChange="afficherElement(maliste);"

Donc afficher une liste déjà affichée....

Si tu veux que ça fasse quelque chose, il faut au moins deux listes (ou deux objets) avec une action sur un qui affiche l'autre.

**toma03** · 12/07/2007, 11h28

Impossible . Je n'arrive pas à faire ce que je veux je comprend pas très bien malgrès ton aide !!!!oops:

peux-tu :me donner le code qui :
_ afficiche une liste déroulante :--> liste1
_ Quand on sélectionne un élément dans la liste1 , une autre liste déroulante apparait en dessous par exemple :-->liste2

encore désolé

**buzzkaido** · 12/07/2007, 11h38

_ afficiche une liste déroulante :--> liste1

Tu as deja le code avec afficher/cacherElement.

Mais, si tu veux que ta liste soit cachée au depart, il faut que tu utilise :

Code :

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

style="display:  none;"

Pour l'afficher, tu veux quoi ?

Si tu veux qu'elle s'affiche quand on clique sur un bouton, il faut faire :

Code :

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

<button type="button" onClick="afficherElement('maListe1');">

Si tu veux afficher la liste 2 quand on clique sur la liste 1, il faut faire :

Code :

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

<select id="maListe1" onChange="afficherElement('maliste2');">

Dans ton code, tu faisait ça :

- afficher la liste "maListe" avec display: block; dans la balise SELECT
- afficher la liste "maListe" avec afficherElement(maListe); en bas de la page
- afficher la liste "maListe" quand on clique dans "maListe" avec onChange

Ce qui n'a pas beaucoup de sens....

Precision : quand tu appelles afficherElement ou cacherElement, il faut utiliser des ' autour du nom de l'element, car c'est une chaine de caractere.

afficherElement(maliste); -> faux
afficherElement('maliste'); -> juste

**Xann_71** · 12/07/2007, 14h36

Salut, n'oubli pas de rajouter un " a la fin de ton code de la premiere ligne du message #8, sinon sa fonctionnera pas même si ton code est bon

A+

**toma03** · 12/07/2007, 16h07

Merci beaucoup ça marche !!!

Maintenant je vais essayé d'afficher une seconde liste déroulante selon l'élément choisi dans la premiere .... je vais devoir utilisé des if ?

merci encore

**buzzkaido** · 12/07/2007, 16h27

selon l'élément choisi dans la premiere

C'est une condition, ça, non ?

Donc il faudra au moins une instruction.... conditionnelle !

"if" ou "switch"

**toma03** · 12/07/2007, 16h35

oui s'est ce que je pensais : avec un if ca dois etre jouable , mais je ne vois pas comment l'utilisé :

Je pensai aussi recréer une fonction qui envoi comme pamametre l'id de la "bonne liste à afficher", à la fonction ,afficherElement() .

??????......................

**buzzkaido** · 12/07/2007, 16h38

?????

J'ai rien compris ?

Essaie d'expliquer :

1/ ce que tu veux faire
2/ là où tu bloques

Parce que là, tout de suite, j'ai pas ma boule de crystal, c'est Sangoku qui me l'a piquée.

**Xann_71** · 12/07/2007, 16h49

Tu devrai peut etre utiliser switch plutot, comme le propose buzzkaido.
C'est fonction "selon" en fait.
En javascript je sais plus ce que sa donne mais en algo c'est:
Selon :
choix1: (conditon)
choix2: (condition)
choix3: (condition)
...

Sa fait un moment que je ne m'en suis pas servit mais si tu dois vraiment avoir différents résultats "selon" l'action réalisée, se sera plus court d'utiliser cette fonction que des if imbriquées

.
Regarde dans le cours javascript, sa doit bien être indiqué comment s'en servir

**toma03** · 12/07/2007, 17h41

J'ai cherché un peu mais j'ai pas trouver grand chose en tous cas rien qui solutionne mon probleme ,

Avec l'aide de buzzkaido j'ai réussis à mettre au point une liste déroulante qui , après selection dans la liste affiche une deuxieme liste déroulante . Cette deuxieme liste déroulante est toujour la meme , peu importe le choix selectionné dans la premiere liste .

Maintenant j'aimerais que la deuxieme liste soit differente selon le choix selectionné dans la première liste ....

j'ai essayé d'etre le plus clair possible , si vous pouvez me dire quelles sont les modifications à apporter à mon code pour permettre cela :

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
 
 
 
<html>
<head>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#FFFFFF" alink="#000066" link="#000066" vlink="#000066" >
<FONT FACE="Arial" SIZE='-1' COLOR="#000099">
 
<SCRIPT language="JavaScript">
<!--
	InitHorloge(300,100);
//-->
</SCRIPT>
 
<form id="form1" name="form1" method="post" action="" >
  <label>
 <select id="maListe1" onChange="afficherElement('maliste2');">
    <option>test1</option>
    <option>test2</option>
    <option>test3</option>
  </select>
  </label>
 
 
 
<p>&nbsp;</p>
 
  <label>
  <select name="maliste2" id="maliste2" style="display:  none;">
    <option>ok </option>
    <option>toto</option>
    <option>titi</option>
  </select>
  </label>
</form>
 
 
 
<p>&nbsp;</p>
 
 
<body>
 
 
 
<script>
function afficherElement(idElement)
{
    document.getElementById(idElement).style.display = "block";
}
 
function cacherElement(idElement)
{
    document.getElementById(idElement).style.display = "none";
}
 
document.write('salut');
 
</script>
</body>
</head>
 
</html>

Merci pour votre aide

**buzzkaido** · 12/07/2007, 17h48

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
  <label>
 <select id="maListe1" onChange="cacherToutesLesListes();afficherElement(this.value);">
    <option value="maSecondeListe_1">test1</option>
    <option value="maSecondeListe_2">test2</option>
    <option value="maSecondeListe_3">test3</option>
  </select>
  </label>

  <label>
  <select name="maSecondeListe_1" id="maSecondeListe_1" style="display:  none;">
    <option>ok </option>
    <option>toto</option>
    <option>titi</option>
  </select>
  </label>

  <label>
  <select name="maSecondeListe_2" id="maSecondeListe_2" style="display:  none;">
    <option>ok </option>
    <option>toto</option>
    <option>titi</option>
  </select>
  </label>

  <label>
  <select name="maSecondeListe_3" id="maSecondeListe_3" style="display:  none;">
    <option>ok </option>
    <option>toto</option>
    <option>titi</option>
  </select>
  </label>

Et dans le javascript :

Code :

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

1
2
3
4
5
6
function cacherToutesLesListes()
{
  cacherElement('maSecondeListe_1');
  cacherElement('maSecondeListe_2');
  cacherElement('maSecondeListe_3');
}

En gros, pour chacune des options, tu mets comme valeur l'id de la liste qui doit etre affichée quand on clique dessus.

La fonction "cacherToutesLesListes" sert à toutes les cacher avant de d'afficher celle que l'on veut, comme ça il n'y en a qu'une d'affichée à la fois.

**toma03** · 13/07/2007, 10h16

Merci beaucoup ,
ca marche impecable ....

[DOM] comment utiliser onselect

JavaScript

Discussions similaires

Partager

Partager