Afficher/Cacher un DIV à partir d'un select

Version imprimable

Bonjour,

J'ai un soucis avec l'affichage d'un div après le choix d'un select, j'ai essayé pas mal de modification qui n'ont apporté aucun changment.
Lorsque je clique, le DIV ne s'affiche pas.
Pouvez vous m'éclairer.

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<script language="javascript">
function changementType() {
	var type = document.myform.getElementById("type").value;
	if (type == "Hebdomadaire") {
		document.myform.getElementById("hebdomadaire").style.display="block";
	} else{
		document.myform.getElementById("hebdomadaire").style.display="none";
	}
	if (type == "Mensuel"){
		document.getElementById("mensuel").style.display="block";
	}else{
		document.getElementById("mensuel").style.display="none";
	}
	if (type == "Quotidien"){
		document.getElementById("quotidien").style.display="block";
	}else{
		document.getElementById("quotidien").style.display="none";
	}
}
</script>	
<form name="myform" action="Valider_Expedition_Pudo.php" method="post" target="Details" onsubmit="return popWindow(this);">		
<table border="0" cellpadding="0" cellspacing="10" width="100%">
  <tbody>
    <tr>
      <td>
      <table style="outline-color: navy ! important; outline-style: dashed ! important; outline-width: 2px ! important;" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
          <tr>
            <td valign="top" width="50%">				
   <fieldset>
	 					 <legend>Informations Livraison</legend> 
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="fond1" align="center" height="15">Field</td>
<td class="fond1" align="center">Value</td>
</tr>	
<td class="fond2" height="20" width="170"><img src='../../image/lorrygreen-camion-icone-5578-16.png' border=\"0\"> Prestation</td>
<td class="fond2" align="left">
<select name="type" id="type" onchange="changementType();">
<option value="Hebdomadaire">Hebdomadaire</option>	   
<option value="Mensuel">Mensuel</option>	
<option value="Unique">Unique</option>	
<option value="Quotidien">Quotidien</option>		   	
</select>
</td>
</tr>
<tr>
<div id ="hebdomadaire" style="display:none">hebdomadaire</div>
<div id ="mensuel" style="display:none">mensuel</div>
<div id ="quotidien" style="display:none">quotidien</div>
</tr>
<tr>
<td class="fond2" height="20" width="170"><img src='../../image/horloge-icone-4789-16.png' border=\"0\"> Airwaybill</td>
<td class="fond2" align="lef">
<input class="formulaire" name="requiredAirwaybill" size="25" maxlength="25" type="text" /></td>						</td>
</tr>
</tbody>
            	</table>
	 </fieldset> 
            </td>
            <td valign="top">		 
          </td>
       </tr>
   </tbody>
</table>
</form>

21/03/2011, 14h29
Bovino

Code:

var type = document.myform.getElementById("type").value;

:nono:

getElementById() est une méthode de l'objet document uniquement !

Code:

var type = document.getElementById("type").value;
21/03/2011, 14h41
Budy123

J'ai modifié la ligne "var type" mais ça ne fonctionne toujours pas.
21/03/2011, 14h43
Loceka

Il faut passer par selectedIndex, il n'y a pas de notion de "value" sur un select.

Citation:

Envoyé par Loceka

Il faut passer par selectedIndex, il n'y a pas de notion de "value" sur un select.

Si :?
Le value d'un objet select correspond au value de l'option sélectionnée ;)
Code:

1 2 3 4 5 6 <select onchange="alert(this.value)"> <option value="-1">Choisissez...</option> <option value="1">Un</option> <option value="2">Deux</option> <option value="3">Trois</option> </select>

pour continuer sur le "value", j'ai essayé le code ci-dessous, mais ça fonctionne toujours pas :cry:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<script language="javascript">
function changementType() {
	var type = document.getElementById("type").value;
	if (type == "Hebdomadaire") {
		document.myform.type.getElementById("hebdomadaire").style.display="block";
	} else{
		document.myform.type.getElementById("hebdomadaire").style.display="none";
	}
	if (type == "Mensuel"){
		document.myform.type.getElementById("mensuel").style.display="block";
	}else{
		document.myform.type.getElementById("mensuel").style.display="none";
	}
	if (type == "Quotidien"){
		document.myform.type.getElementById("quotidien").style.display="block";
	}else{
		document.myform.type.getElementById("quotidien").style.display="none";
	}
}
</script>

Code:

1
2
3
4
5
6
7
 
<select name="type" id="type" onchange="changementType(this.value);">
<option value="Hebdomadaire">Hebdomadaire</option>	   	
<option value="Mensuel">Mensuel</option>		
<option value="Unique">Unique</option>	
<option value="Quotidien">Quotidien</option>		   	
</select>

Salut,

Essaie comme ceci...

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
 
<script type="text/javascript">
	function changementType(type){
		switch(type){
			case 'Hebdomadaire':
				document.getElementById('mensuel').style.display='none';
				document.getElementById('quotidien').style.display='none';
				document.getElementById('hebdomadaire').style.display='block';
				break;
			case 'Mensuel':
				document.getElementById('hebdomadaire').style.display='none';
				document.getElementById('quotidien').style.display='none';
				document.getElementById('mensuel').style.display='block';
				break;
			case 'Quotidien':
				document.getElementById('hebdomadaire').style.display='none';
				document.getElementById('mensuel').style.display='none';
				document.getElementById('quotidien').style.display='block';
		}
	}
</script>
 
<select name="type" id="type" onchange="changementType(this.value);">
	<option value="Hebdomadaire">Hebdomadaire</option>	   	
	<option value="Mensuel">Mensuel</option>		
	<option value="Unique">Unique</option>	
	<option value="Quotidien">Quotidien</option>		   	
</select>

21/03/2011, 16h00
Budy123

Merci Eric2a mais cela ne fonctionne pas, j'essaye toutes les solutions mais rien ne fonctionne.
J'arrive a faire fonctioner si le div a faire apparaitre est dans les memes balises "td" mais lorsque qu'il est en dehors rien ne se passe.
21/03/2011, 16h02
Bovino

Citation:

Envoyé par Budy123

J'arrive a faire fonctioner si le div a faire apparaitre est dans les memes balises "td" mais lorsque qu'il est en dehors rien ne se passe.

:cry:

Le contenu d'un tableau doit obligatoirement se trouver dans des balises td ou th !
21/03/2011, 16h28
nadox

Bonjour,

Je ne sais pas quel navigateur est utilisé, mais

Code:

onchange="changementType(this.value);"

n'est pas géré de façon uniforme sur tous les navigateur, il me semble ?
A quel moment le select prend la nouvelle 'value' (avant ou après l'évènement) ?
Perso, j'utilise toujours le monselect.options[monselect.selectedIndex] pour être sûr...
21/03/2011, 16h32
Bovino

Citation:

Envoyé par nadox

Bonjour,

Je ne sais pas quel navigateur est utilisé, mais

Code:

onchange="changementType(this.value);"

n'est pas géré de façon uniforme sur tous les navigateur, il me semble ?

Si, le onchange d'un select est fiable.
Le souci que tu évoques est lié au onclick sur un radio ou un checkbox ;)
21/03/2011, 16h38
SpaceFrog

Heureusement que l'on te dit que getElementById est une methode de document ...

Code:

document.myform.type.getElementById("hebdomadaire").

:roll:
21/03/2011, 16h38
nadox

Ha bon !
Au temps pour moi. J'étais persuadé d'avoir rencontré le problème(anciennement). Merci pour la précision alors :mrgreen: !