Menu déroulant avec contenu sélectif

**hellnn** · 29/12/2006, 15h06

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

:

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

**ryan** · 29/12/2006, 16h10

Yop!

D'avance merci de votre aide (car je m'arrache les cheveux....)

Ch'uis pas fan the Sinead O'connor...

Pourquoi ne pas tous les effacer avant d'afficher celui qui a été choisi?

Code :

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

1
2
 
<option id="selection 1" onclick="showhide('all','none');(showhide('sma',1);">selection 1</option>

**hellnn** · 06/01/2007, 11h57

Bonjour à toi, bonne année et merci pour ta réponse (lol)

j'ai essayé ta soluce mais y'a plus rien qui s'affiche...

<option id="selection 1" onclick="showhide('all','none');(showhide('sma',1);">selection 1</option>

y'a pas un souci dans la syntaxe ???

bonne journée a bientot

LN

Menu déroulant avec contenu sélectif

JavaScript

Discussions similaires

Partager

Partager