Form select et afficher DIV

Version imprimable

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:

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

Tu pourrais utiliser l'evenement onload dans body.

Code:

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

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

Code:

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

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

Code:

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:

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

le code complet

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

Bonjour,

Citation:

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:

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:

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

04/09/2011, 16h45
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...
04/09/2011, 18h06
NoSmoking

Citation:

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

comme cela :

Code:

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>

04/09/2011, 18h41
NoSmoking

donc connaissant $result["id"], il ne doit pas être difficile de mettre en visible la DIV correspondante dans la suite de ton code.
04/09/2011, 19h03
voyageurdumonde

Effectiveement, j'ai le cerveau embrouille auhjourd'hui.

Merci
06/09/2011, 18h41
NoSmoking

cela signifie t-il que c'est :resolu: ?