Afficher/Cacher un DIV à partir d'un select

[Budy123]

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>

[Bovino]

Code :

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

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

Code :

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

[Budy123]

J'ai modifié la ligne "var type" mais ça ne fonctionne toujours pas.

[Loceka]

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

[Bovino]

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 html :

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>

[Budy123]

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

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>

[Eric2a]

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>

[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.

[Bovino]

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.

Le contenu d'un tableau doit obligatoirement se trouver dans des balises td ou th !

[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...

[Bovino]

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

[SpaceFrog]

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

Code :

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

[nadox]

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