Afficher des champs supplémentaires suivant le choix fait dans une liste déroulante

**arnaudperfect** · 10/04/2007, 17h02

Bonjour,

Je cherche un sript qui me permetterait lorsque je selectionne une option dans une liste déroulante (deux possibles), suivant l'option sélectionné, j'affiche ou non d'autres champs de formulaire dans mon formulaire de base.

Auriez vous des idées ?

Merci d'avance

Arnaud

**SpaceFrog** · 10/04/2007, 17h07

J'ai une super bonne idée ...
file dans la FAQ et plus vite que ça !!!

**arnaudperfect** · 11/04/2007, 09h06

J'ai pas trouvé ce qui pourrait m'interesser dans la faq...

**SpaceFrog** · 11/04/2007, 09h16

Dans la FAQ tu trouveras tout pour afficher / masquer des éléments ou encore créer dynamiquement des objets de formulaire, qui sont les deux methodes possibles pour réaliser ton projet ...

**arnaudperfect** · 11/04/2007, 12h17

oui j'ai vu ca, mais les trucs qui m'interessait, ne fonctionne pas...

**suricat** · 11/04/2007, 12h31

si ça ne fonctionne pas c'est que tu t'y prend mal, montre tes essais de code pour que l'on te dise ce qui cloche.

**SpaceFrog** · 11/04/2007, 13h10

Heu si c'est dasn la FAQ c'est tésté et approuvé !!!

**arnaudperfect** · 11/04/2007, 14h11

j'ai tester ca :

http://javascript.developpez.com/faq...=Other#objForm

mais rien ne réagis

**SpaceFrog** · 11/04/2007, 14h13

rien de plus normal là il s'agit d'activer ou de desactiver ... pas de cacher ou de montrer ....

**arnaudperfect** · 11/04/2007, 14h37

bon j'ai repris un bout de code que j'avais déjà fais sur un autre projet. Avec un div qui s'affiche ou non.

mon soucie est le suivant :

Code :

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

1
2
3
4
5
<select name="select" style="width:140px">
  <option value="0">Non attribuer</option>
  <option value="1">Attribuer</option>
  <option onselected="displayDiv('mondiv', '1' )" value="2">Pr&ecirc;t</option>
</select>

J'aimerai lorsque j'ai selectionner l'option 2 que l'action ce déclanche. Et si j'ai selectionner une autre option, mon div ce cache.

Voici le code pour afficher le div

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
<script language="JavaScript" type="text/javascript">
 
      function displayDiv( nom, numero )
      {
	    var divID = nom + numero;
        if (document.getElementById( divID ).style.display == "none")
        {
 
          document.getElementById( divID ).style.display = "block";
          document.getElementById( divID ).value = "Cacher";
        }
        else
        {
          document.getElementById( divID ).style.display = "none";
          document.getElementById( divID ).value = "Afficher";
        }
      }
    </script>

une idée pour mon problème ?

**SpaceFrog** · 11/04/2007, 14h43

passe par le onchage du select et verifie le selectedItem ...

les evènements des options ne sont pas fiable car pas implémentés dasn tous les browsers

**arnaudperfect** · 11/04/2007, 14h52

euh, comprend pas trop...

P.S : Jy connais rien en javascript...

**SpaceFrog** · 11/04/2007, 14h58

Aller pour te mettre sur la voie ...

Code :

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

1
2
3
4
5
<select name="select" style="width:140px" onchange="alert(this.selectedItem)">
  <option value="0">Non attribuer</option>
  <option value="1">Attribuer</option>
  <option value="2">Pr&ecirc;t</option>
</select>

**arnaudperfect** · 11/04/2007, 15h18

oué, merci beaucoup !

Mais je ne vois pas comment évoluer par rapport à la piste que tu m'as donné. Mes connaissances en javascript son plus que minime. Je vais essayer de trouver une autre solution.

Merci encore

++

**SpaceFrog** · 11/04/2007, 15h20

tu n'aura pas d'autre solution ...
teste le selectedItem et en foxntion du resultat modifies le style visibility ou display de l'element voulu ...

**arnaudperfect** · 12/04/2007, 09h00

Tu peux me donner un exemple ?

Car je ne comprend pas trop ce que tu m'expliques...

**SpaceFrog** · 12/04/2007, 09h18

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
<script type='text/javascript'>
function wtfDidYouChoose(choix){
              switch (choix){
              				  case 0 : 	alert('non attribué');
              				  				break; 
              				  case 1 : 	alert('attribué');
              				  				break; 
 
              				  case 2 : 	alert('prêt');
              				  				break; }
}
</script>
</head>
 
<body  onload="document.getElementById('one').selectedIndex=-1">
<p>
<select name="select" id='one' style="width:140px" onchange="wtfDidYouChoose(this.selectedIndex)">
<optgroup label='faites votre choix'>
  <option value="0">Non attribué</option>
  <option value="1">Attribué</option>
  <option value="2">Pr&ecirc;t</option>
</optgroup>  
</select>
</body>

**arnaudperfect** · 12/04/2007, 09h21

pour visualisez le value il faut ecrire : onchange="alert(this.selectedIndex)"

**arnaudperfect** · 12/04/2007, 09h23

J'ai tester ton script.

Mais à partir de ca, comment je fais pour affichier mes champs supplémentaires ?

**SpaceFrog** · 12/04/2007, 09h30

ben dans chaque case au lieu de faire l'alert tu rend visible ou invisible tel ou tel element de la page ...

Bon va falloir secouer un peu la cage à neurones là ... je vais pas faire tout ton code ...
voici un dernier exemple tout se passe sur les deux dernier choix ...

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
<script type='text/javascript'>
function wtfDidYouChoose(choix){
              switch (choix){
              				  case 0 : 	alert('non attribué');
              				  				break; 
              				  case 1 : 	document.getElementById('two').style.visibility='visible'
              				  				break;
 
              				  case 2 : 	document.getElementById('two').style.visibility='hidden'
              				  				break;
							 }
}
</script>
</head>
 
<body  onload="document.getElementById('one').selectedIndex=-1">
<p>
<select name="select" id='one' style="width:140px" onchange="wtfDidYouChoose(this.selectedIndex)">
<optgroup label='faites votre choix'>
  <option value="0">Non attribué</option>
  <option value="1">Attribué</option>
  <option value="2">Pr&ecirc;t</option>
</optgroup>  
</select><br />
<input type='text' style="visibility:hidden;" id='two' />
</body>

Afficher des champs supplémentaires suivant le choix fait dans une liste déroulante

JavaScript

Discussions similaires

Partager

Partager