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.

Afficher/Cacher un DIV à partir d'un select

JavaScript

Vue hybride

Discussions similaires

Partager

Partager