Afficher/Cacher un DIV à partir d'un select

**Budy123** · 21/03/2011, 14h20

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 :

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
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** · 21/03/2011, 14h29

Code :

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

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

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

Code :

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

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

**Budy123** · 21/03/2011, 14h41

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

**Loceka** · 21/03/2011, 14h43

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

**Bovino** · 21/03/2011, 14h49

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 :

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

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** · 21/03/2011, 14h58

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

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

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

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** · 21/03/2011, 15h29

Salut,

Essaie comme ceci...

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
 
<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** · 21/03/2011, 16h00

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** · 21/03/2011, 16h02

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** · 21/03/2011, 16h28

Bonjour,

Je ne sais pas quel navigateur est utilisé, mais

Code :

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

 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** · 21/03/2011, 16h32

Envoyé par nadox

Bonjour,

Je ne sais pas quel navigateur est utilisé, mais

Code :

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

 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** · 21/03/2011, 16h38

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

Code :

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

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

**nadox** · 21/03/2011, 16h38

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

!

Afficher/Cacher un DIV à partir d'un select

JavaScript

Discussions similaires

Partager

Partager