Menu déroulant avec contenu sélectif
Bonjour à tous,
Parfaitement débutante en JS, j'essaye désespéremment depuis plusieurs jours d'adapter un script à mon cas de figure...
Il s'agit d'un menu déroulant qui permettrait d'afficher du contenu en fonction de l'option choisi (ce qui fonctionne avec mon code).
Le seul souci c'est que le contenu affiché lorsqu'on clique sur l'option 1 par exemple, ne disparait pas pour laisser place au contenu de l'option 2 lorsqu'on le sélectionne.
Les contenus s'ajoutent les uns sous les autres au fur et à mesure que l'on sélectionne les différentes options.
Pour quelqu'un qui connait JS je suppose que celà doit etre un jeu d'enfants...
Comment faire en sorte que seul le contenu correspondant à l'option choisie s'affiche ?
D'avance merci de votre aide (car je m'arrache les cheveux....)
Bonnes fêtes à tous :D:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body onload="showhide('all','none');">
<select id="Contact_objet" name="Contact_objet" size="1">
<option value="">Objet</option>
<option id="selection 1" onclick="showhide('sma',1);">selection 1</option>
<option id="selection 2" onclick="showhide('sma',2);">selection 2</option>
<option id="selection 3" onclick="showhide('sma',3);">selection 3</option>
<option id="selection 4" onclick="showhide('sma',4);">selection 4</option>
</select>
<script language="javascript" type="text/javascript">
if (!document.getElementById)
document.getElementById = function() {
return null;
}
// récupération du nom du navigateur
navname = navigator.appName;
// correction du bogue Microsoft
if(navname == "Microsoft Internet Explorer"){
var vernav = "block";
}else{
var vernav = "table";
}
function showhide(menu, element){
var obj = document.getElementById(menu + element);
var totalnb = 9;
if(menu == 'all' && element == 'none'){
for(i=1; i< totalnb; i++){
document.getElementById('sma' + i).style.display = 'none';
}
}else{
if(element =='all'){
for(i=1; i< totalnb; i++){
document.getElementById(menu + i).style.display = vernav;
}
}else if(element =='none'){
for(i=1; i< totalnb; i++){
document.getElementById(menu + i).style.display = 'none';
}
}else{
if (obj.style.display == 'none'){
obj.style.display = vernav;
}else{
obj.style.display = 'none';
}
}
}
}
</script>
<div id="sma1">Texte adapté à la selection 1</div>
<div id="sma2">Texte adapté à la selection 2</div>
<div id="sma3">Texte adapté à la selection 3</div>
<div id="sma4">Texte adapté à la selection 4 </div>
</body>
</html> |
