Apparition d'1 champ selon valeur de select

Version imprimable

23/07/2007, 17h11
BnA

Apparition d'1 champ selon valeur de select

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! ;-)
23/07/2007, 17h18
E.Bzz

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

A+

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:

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!

24/07/2007, 09h37
E.Bzz

Code:

div.style.display = "";

La syntaxe correcte est

Code:

div.style.display = "block";

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

EDIT :

Code:

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

ton menu1 correspond à l'option [0] et non [1] ;)
A+
24/07/2007, 09h58
BnA
Citation:

Envoyé par E.Bzz

EDIT :

Code:

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...
:evilred:

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

Une idée?

Code:

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>

24/07/2007, 10h47
BnA
Génial!!

Par contre, j'avais jamais vu ce type de syntaxe
Code:

1 2 op=="menu2" ? "block" : "none"
Quelqu'un pour m'expliquer?

En tous cas, merci!
24/07/2007, 10h52
magicwill

Ca equivaut à :
Si (op == "menu2")
Alors
"block"
Sinon
"none"

En gros, on verifie quelle valeur du select est cliquée...

++
24/07/2007, 10h53
E.Bzz
Citation:
Envoyé par BnA

Code:

1 2 op=="menu2" ? "block" : "none"

Quelqu'un pour m'expliquer?
Un "if then else" condensé :

Code:

x=(condition)?si_true:si_false;

A+
24/07/2007, 10h54
BnA

Ok, me disait bien que c'était une sorte de "if" simplifié...

Merci beaucoup à tous pour vos contributions!

/me adore ce forum!