Apparition d'1 champ selon valeur de select

**BnA** · 23/07/2007, 17h11

Bonjour à tous!

J'ai une petite question:

j'aimerais concevoir un formulaire de contact, dans lequel, pour le "SUJET", je mets une liste d'option, avec différents choix, genre "Question technique", "Question commerciale",...

Étant donné qu'on ne saurait couvrir toutes les possibilités, je mets aussi à disposition un choix "Autre".

Ce que j'aimerais, c'est que lorsque l'user choisit "Autre", un champ text apparait, dans lequel il mets plus en détails la raison de son contact.

Je sais qu'il est possible de coupler du javascript avec la liste à options, mais est-ce possible de coupler du javascript avec seulement une valeur de ma liste??

Merci pour vos éclaircissements! ;-)

**E.Bzz** · 23/07/2007, 17h18

Bonjour,
déjà répondu de nombreuses fois : cf. la FAQ ou les contributions, merci ...

A+

**BnA** · 24/07/2007, 09h20

OK désolé, j'ai du passer à côté...

J'ai trouvé un truc intéressant, mais j'ai un souci lors de la mise en oeuvre...

En gros, lorsque "menu2" est sélectionné, ça devrait afficher "div1", et ensuite cacher "div1" si jamais l'user change d'option.

Le tout sans reload évidemment.

Mais ça ne marche pas (évidemment ^^)... Une bonne âme pour me dire ce qui cloche?

Voici le code intégral.

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
 
<!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>Untitled Document</title>
<style type="text/css">
#div1{
display:none;
}
</style>
<script type="text/javascript">
function cache(idDiv) {
var div = document.getElementById(idDiv);
div.style.display = "none";
}
 
function affiche(idDiv){
var div = document.getElementById(idDiv);
div.style.display = "";
}
 
 
function show(idDiv){
if (document.choix.liste.options[1].selected = true){
	affiche(idDiv);
	}
	else{
	cache(idDiv);
	}
}
 
 
</script>
</head>
<body>
<form name="choix">
  <select name="liste" onChange="show('div1');">
    <option value="menu1">menu1</option>
    <option value="menu2">menu2</option>
  </select>
</form>
<div id="div1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eros risus,
  porttitor sed, malesuada quis, dictum non, lorem. Vestibulum sed tortor.
  Aenean vitae turpis. Cras fringilla scelerisque orci. Morbi pretium
  condimentum risus. Sed elementum lacinia urna. Proin sed pede ut felis
  ultrices tincidunt. Aliquam erat volutpat. Morbi convallis odio nec ante.
  Donec turpis. Nunc sit amet turpis eget nibh adipiscing aliquam. </div>
</body>
</html>

Merci d'avance!

**E.Bzz** · 24/07/2007, 09h37

Code :

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

div.style.display = "";

La syntaxe correcte est

Code :

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

div.style.display = "block";

(sauf peut-être pour IE 7, apparament) ...

EDIT :

Code :

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

if (document.choix.liste.options[1].selected = true){

ton menu1 correspond à l'option [0] et non [1]

A+

**BnA** · 24/07/2007, 09h58

Envoyé par E.Bzz

EDIT :

Code :

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

if (document.choix.liste.options[1].selected = true){

ton menu1 correspond à l'option [0] et non [1]

C'est lorsque l'user choisit mon option2 (donc [1]) que la DIV doit s'afficher, mais peu importe, sur le principe on est d'accord.

Sinon ça marche avec "block" en display, ma DIV s'affiche bien, mais par contre, lorsque je sélectionne l'option[1] (celle qui fait s'afficher ma DIV) puis que je change:

ma DIV ne disparait pas...
et l'option[1] se "resélectionne" automatiquement, je n'arrive pas à changer mon choix...

Autant le coup du display=""; mea culpa, autant là... Je ne vois pas...

Une idée?

**javatwister** · 24/07/2007, 10h28

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
 
<style type="text/css">
 
#cach {
display:none;
}
 
</style>
 
<script type="text/javascript">
 
function plus(op){
	document.getElementById("cach").style.display= op=="menu2" ? "block" : "none"
}
 
</script>
</head>
<body>
 
<form id="f" action="">
	<div>
		<select name="s" onchange="plus(this.value)">
			<option value="menu1">menu 1</option>
			<option value="menu2">menu 2</option>
		</select>
	</div>
</form>
 
<div id="cach">truc bidule chose</div>
 
</body>
</html>