Form select et afficher DIV

**voyageurdumonde** · 04/09/2011, 06h29

Bonjour,

J'utilise le code suivant pour afficher des DIV en fonction d'un form select.

Est-il possible de faire afficher la div lors du premier affichage sans avoir fait de selection (onchange="changementtypeactivite(this.id);")

Dans mon exemple, je voudrais que la DIV lieuavoir13 soit afficher et non masque lors de l'affichage de la page.

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr">
<head>
<script language="javascript">
function changementtypeactivite(Id) {
	var type = document.getElementById(Id).value;
	if (type == "lieuavoir") {
		document.getElementById("lieuavoir"+Id).style.display="block";
	} else{
		document.getElementById("lieuavoir"+Id).style.display="none";
	}
	if (type == "musee") {
		document.getElementById("musee"+Id).style.display="block";
	} else{
		document.getElementById("musee"+Id).style.display="none";
	}
 
	if (type == "activiteafaire") {
		document.getElementById("activiteafaire"+Id).style.display="block";
	} else{
		document.getElementById("activiteafaire"+Id).style.display="none";
	}
 
	if (type == "monumenthistorique") {
		document.getElementById("monumenthistorique"+Id).style.display="block";
	} else{
		document.getElementById("monumenthistorique"+Id).style.display="none";
	}
 
	if (type == "festival") {
		document.getElementById("festival"+Id).style.display="block";
	} else{
		document.getElementById("festival"+Id).style.display="none";
	}
 
}
</script>
 
</head>
<body>
 
<select id="13" name="13" onchange="changementtypeactivite(this.id);">
<option value="lieuavoir">Lieu &agrave; voir</option>
<option value=""> </option>
<option value="lieuavoir">Lieu &agrave; voir</option>
<option value="musee">Mus&eacute;e</option>
<option value="activiteafaire">Activit&eacute; &agrave; faire</option>
<option value="monumenthistorique">Monument & Site Historique</option>
<option value="festival">Festival</option>
</select>
 
 
<div id ="lieuavoir13" style="display:none">
 
<select name="lieuavoirselect" id="lieuavoirselect">
	<option value=""></option>
       <option value="parcnational">Parc National</option>	   
	   <option value="pointdevue">Point de vue</option>	
	   <option value="autrelieuavoir">Autre</option>		   		   
	   </select><br>
 
 
	   </div>
 
 
<div id ="activiteafaire13" style="display:none">	   
<select name="activiteafaireselect" id="activiteafaireselect">
<option value=""></option>
       <option value="zoo">Zoo</option>	   
	   <option value="Loisirs">Loisirs</option>
	   <option value="Sportive">Sportive</option>
	   <option value="autreactiviteafaire">Autre</option>		   		   
	   </select><br>
 
 
	   </div> 
 
 
<div id ="musee13" style="display:none">
<select name="typedemusee" id="typedemusee">
<option value=""></option>
       <option value="art">Mus&eacute;e d'Art</option>	   
	   <option value="Mus&eacute;e d'histoire">Mus&eacute;e d'histoire</option>	
	   <option value="Mus&eacute;e d'histoire naturelle">Mus&eacute;e d'histoire naturelle</option>
 
	   <option value="Mus&eacute;e Sciences et Techniques">Mus&eacute;e Sciences et Techniques</option>
	   <option value="Mus&eacute;e d'ethnologie">Mus&eacute;e d'ethnologie</option>	
	   <option value="Autremusee">Autre</option>		   		   
	   </select><br>
 
 
 
 </div>
 
 
<div id ="monumenthistorique13" style="display:none"> 
 <select name="typedesitehistorique" id="typedesitehistorique">
 <option value=""></option>
	   <option value="Ev&eacute;nement Historique">Ev&eacute;nement Historique</option>	
	   <option value="Centre Historique">Centre Historique</option>
	   <option value="Monument Artistique">Monument Artistique</option>
	   <option value="Monument Architectural">Monument Architectural</option>
 
	   <option value="Monument Historique">Monument Historique</option>
	   <option value="Site arch&eacute;ologique">Site arch&eacute;ologique</option>
	   <option value="Autresitehistorique">Autre type</option>		   		   
	   </select><br>
 
 
 
  </div>
 
  <div id ="festival13" style="display:none">
<input type="text" SIZE="35" name="theme" value="" />
 
 
  </div>
</body>
</html>

Merci de votre aide

**fab256** · 04/09/2011, 09h09

Tu pourrais utiliser l'evenement onload dans body.

Code :

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

<body onload="changementtypeactivite(document.getElementById('13'))">

Utilise aussi selected pour choisir l'option par défaut.

Code :

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

<option value="lieuavoir" selected="selected">

et la fonction changementtypeactivite tu passe la reference a l'objet et non sa valeur.

Code :

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

1
2
3
4
function changementtypeactivite(obj) {
	var type = obj.options[obj.selectedIndex].value;
    var Id = obj.id;
...

et l'appel de cette fonction de cette facon

Code :

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

<select id="13" name="13" onchange="changementtypeactivite(this);">

le code complet

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr">
<head>
<script language="javascript">
function changementtypeactivite(obj) {
	var type = obj.options[obj.selectedIndex].value;
        var Id = obj.id;
	if (type == "lieuavoir") {
		document.getElementById("lieuavoir"+Id).style.display="block";
	} else{
		document.getElementById("lieuavoir"+Id).style.display="none";
	}
	if (type == "musee") {
		document.getElementById("musee"+Id).style.display="block";
	} else{
		document.getElementById("musee"+Id).style.display="none";
	}
 
	if (type == "activiteafaire") {
		document.getElementById("activiteafaire"+Id).style.display="block";
	} else{
		document.getElementById("activiteafaire"+Id).style.display="none";
	}
 
	if (type == "monumenthistorique") {
		document.getElementById("monumenthistorique"+Id).style.display="block";
	} else{
		document.getElementById("monumenthistorique"+Id).style.display="none";
	}
 
	if (type == "festival") {
		document.getElementById("festival"+Id).style.display="block";
	} else{
		document.getElementById("festival"+Id).style.display="none";
	}
 
}
 
 
</script>
 
</head>
<body onload="changementtypeactivite(document.getElementById('13'))">
 
<select id="13" name="13" onchange="changementtypeactivite(this);">
<option value="lieuavoir" selected="selected">Lieu &agrave; voir</option>
<option value="musee" >Mus&eacute;e</option>
<option value="activiteafaire">Activit&eacute; &agrave; faire</option>
<option value="monumenthistorique" >Monument & Site Historique</option>
<option value="festival"  >Festival</option>
</select>
 
 
<div id ="lieuavoir13" style="display:block">
 
<select name="lieuavoirselect" id="lieuavoirselect">
	<option value=""></option>
       <option value="parcnational">Parc National</option>	   
	   <option value="pointdevue">Point de vue</option>	
	   <option value="autrelieuavoir">Autre</option>		   		   
</select><br>
</div>
 
 
<div id ="activiteafaire13" style="display:none">	   
<select name="activiteafaireselect" id="activiteafaireselect">
<option value=""></option>
       <option value="zoo">Zoo</option>	   
	   <option value="Loisirs">Loisirs</option>
	   <option value="Sportive">Sportive</option>
	   <option value="autreactiviteafaire">Autre</option>		   		   
	   </select><br>
 
 
	   </div> 
 
 
<div id ="musee13" style="display:none">
<select name="typedemusee" id="typedemusee">
<option value=""></option>
       <option value="art">Mus&eacute;e d'Art</option>	   
	   <option value="Mus&eacute;e d'histoire">Mus&eacute;e d'histoire</option>	
	   <option value="Mus&eacute;e d'histoire naturelle">Mus&eacute;e d'histoire naturelle</option>
 
	   <option value="Mus&eacute;e Sciences et Techniques">Mus&eacute;e Sciences et Techniques</option>
	   <option value="Mus&eacute;e d'ethnologie">Mus&eacute;e d'ethnologie</option>	
	   <option value="Autremusee">Autre</option>		   		   
	   </select><br>
 
 
 
 </div>
 
 
<div id ="monumenthistorique13" style="display:none"> 
 <select name="typedesitehistorique" id="typedesitehistorique">
 <option value=""></option>
	   <option value="Ev&eacute;nement Historique">Ev&eacute;nement Historique</option>	
	   <option value="Centre Historique">Centre Historique</option>
	   <option value="Monument Artistique">Monument Artistique</option>
	   <option value="Monument Architectural">Monument Architectural</option>
 
	   <option value="Monument Historique">Monument Historique</option>
	   <option value="Site arch&eacute;ologique">Site arch&eacute;ologique</option>
	   <option value="Autresitehistorique">Autre type</option>		   		   
	   </select><br>
 
 
 
  </div>
 
  <div id ="festival13" style="display:none">
<input type="text" SIZE="35" name="theme" value="" />
 
 
  </div>
 
</body>
</html>

**NoSmoking** · 04/09/2011, 11h16

Bonjour,

Dans mon exemple, je voudrais que la DIV lieuavoir13 soit afficher et non masque lors de l'affichage de la page.

dans ce cas ne mets pas de display:none dans sa partie style.

Au passage

<script language="javascript"> est obsolète, lui préférer <script type="text/javascript">
la fonction d'affichage peut être grandement factorisée.

exemple d'optimisation

Code :

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

1
2
3
4
5
6
7
8
9
10
function changementtypeactivite( obj){
  var sValue, sChoix = obj.value;
  var i, nb, indice = obj.id;
  for( i = 0, nb = obj.options.length; i < nb; i++){
    sValue = obj.options[i].value;
    if( sValue){
      document.getElementById( sValue +indice).style.display = ( sValue === sChoix) ? 'block' : 'none';
    }
  }
}

avec le passage de l'objet select en paramètre

Code :

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

<select id="13" name="13" onchange="changementtypeactivite( this);">

**voyageurdumonde** · 04/09/2011, 16h45

Merci pour vos reponse,

Par contre lieuavoir13 etait un exemple car il s'agit d'un code genere par du while en php.

donc je ne peux pas connaitre par acvance la valeur par default. ca peut etre pour un lieuavoir13 pour l'autre musee525 etc...

**NoSmoking** · 04/09/2011, 18h06

Envoyé par voyageurdumonde

Merci pour vos reponse,

Par contre lieuavoir13 etait un exemple car il s'agit d'un code genere par du while en php.

donc je ne peux pas connaitre par acvance la valeur par default. ca peut etre pour un lieuavoir13 pour l'autre musee525 etc...

comment est décidée cette valeur par défaut ????

**voyageurdumonde** · 04/09/2011, 18h15

comme cela :

Code :

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

1
2
3
4
5
6
7
<select id="'.$result["id"].'" name="'.$result["id"].'" onchange="changementtypeactivite(this.id);">
<option value="'.$result["type"].'">'.$type2.'</option>
<option value="lieuavoir">Lieu &agrave; voir</option>
<option value="musee">Mus&eacute;e</option>
<option value="activiteafaire">Activit&eacute; &agrave; faire</option>
<option value="monumenthistorique">Monument & Site Historique</option>
<option value="festival">Festival</option>