Menu déroulant avec contenu sélectif

Résolu

helln06 Messages postés 4 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 2 mai 2007 - 29 déc. 2006 à 14:47
helln06 Messages postés 4 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 2 mai 2007 - 7 janv. 2007 à 13:20

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

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

Bonnes fêtes à tous :D:

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

<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' &amp;&amp; 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> 

Texte adapté à la selection 1

Texte adapté à la selection 2

Texte adapté à la selection 3

Texte adapté à la selection 4  

</html>

A voir également:

Javascript menu déroulant dynamique
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Base de données javascript - Conseils pratiques -Javascript
Javascript goto ✓ - Forum Javascript / DHTML
Menu php - Forum PHP

6 réponses

Réponse 1 / 6

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
6 janv. 2007 à 22:37

Il y a eu quelques coupés aussi apparemment, la fonction showhide a été largement amputée
je te propose une version simplifiée...

<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//---------------------
function Affiche( sel_){
var szNum = sel_.options[sel_.selectedIndex].value;
//-- On cache tout
for( var i =0; i < sel_.options.length; i++)
    Hide( 'sma'+ i);
//-- On affiche le nouveau
Show('sma' + parseInt(szNum));
}
//------------------
function Hide( div_){
var Obj = document.getElementById( div_);
if( Obj)
   Obj.style.display = 'none';
}
//------------------
function Show( div_){
var Obj = document.getElementById( div_);
if( Obj)
   Obj.style.display = '';
}
</script>
</head>
<select id "Contact_objet" name "Contact_objet" size = "1" onchange = "Affiche(this);">
<option value="">Objet</option>
<option value="1">selection 1</option>
<option value="2">selection 2</option>
<option value="3">selection 3</option>
<option value="4">selection 4</option>
</select>

Texte adapté à la selection 1

Texte adapté à la selection 2

Texte adapté à la selection 3

Texte adapté à la selection 4

</html>

Fais en bon usage...

;0)

Réponse 2 / 6

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
29 déc. 2006 à 16:31

B
onjour...
Il te faut cacher celui montrer avant d'en afficher un nouveau en mettant par exemple
<option id="selection 1" onclick="showhide('all','none');showhide('sma',1);">selection 1</option>

PS : ne tourne pas sous IE 6
;0)

Réponse 3 / 6

helln06 Messages postés 4 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 2 mai 2007
6 janv. 2007 à 12:04

Bonjour, bonne année et merci pour ta réponse

aurai-tu par hasard une autre soluce qui me permette d'obtenir cet effet sur le max de naviguateur ??

bonne journée à toi et @bientot :)

Hélène

Réponse 4 / 6

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
6 janv. 2007 à 12:39

B
onjour...
Le probléme de compatibilité vient de la gestion de l'événement sur les OPTIONs.
Il est préférable de travailler avec l'événement onchange sur le SELECT

Donc sans rien changer à ta fonction function showhide on peut ajouter une fonction Affiche comme ceci par exemple
//---------------------
function Affiche( sel_){
//-- Récup value de l'option sélectionnée
var szNum = sel_.options[sel_.selectedIndex].value;
//-- Si Non vide
if( szNum){
//-- On cache tout
    showhide('all','none');
    //-- On affiche le nouveau
    showhide('sma', parseInt(szNum));
}
//-- Si vide on cache tout
else
    showhide('all','none');
}

l'appel sur le SELECT devient<select id "Contact_objet" name "Contact_objet" size = "1" onchange = "Affiche(this);">
<option value="" >Objet</option>
<option value ="1">selection 1</option>
<option value= "2">selection 2</option>
<option value="3" >selection 3</option>
<option value ="4">selection 4</option>
</select>

Tu notera l'ajout des value qui correspondent au Numéro du DIV, de plus les DIV sont cachés d'entrée pour éviter l'appel à

qui devient donc

et les DIVs deviennent

style="display:none;">Texte adapté à la selection 1

style="display:none;">Texte adapté à la selection 2

style="display:none;">Texte adapté à la selection 3

style="display:none;">Texte adapté à la selection 4

Voila espérant avoir été clair
Have a Good Year
comme disait Michelin
;0)

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

helln06 Messages postés 4 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 2 mai 2007
6 janv. 2007 à 19:30

Hello :)

Oui!! tu as étais super clair et je t'en remercie !!!
Je viens donc de mettre en pratique ces explications en modifiant mon code selon tes bons conseils.

Mais visiblement ça ne fonctionne pas.... j'ai pourtant fais des copier/coller.....

@+LN

<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
function Affiche( sel_){
var szNum = sel_.options[sel_.selectedIndex].value;
if( szNum){
    showhide('all','none');
    showhide('sma', parseInt(szNum));
}
else
    showhide('all','none');
}

var totalnb = 5;

function showhide(element) {
    for(var i=1; i<totalnb; i++) {
        document.getElementById('sma' + i).style.display = 'none';
    }
    var o = document.getElementById('sma' + element);
    if (o) o.style.display = "block";
}
</script>

</head>
<select id "Contact_objet" name "Contact_objet" size = "1" onchange = "Affiche(this);">
<option value="">Objet</option>
<option value="1">selection 1</option>
<option value="2">selection 2</option>
<option value="3">selection 3</option>
<option value="4">selection 4</option>
</select>

Texte adapté à la selection 1

Texte adapté à la selection 2

Texte adapté à la selection 3

Texte adapté à la selection 4

</html>

Réponse 6 / 6

helln06 Messages postés 4 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 2 mai 2007
7 janv. 2007 à 13:20

PetolTeam, tu es en or

merci 1000 fois pour ta gentillesse et ta patience.

quant à moi, je devrai passer moins de temps sur ma bécanne, car visiblement je n'y "vois" plus très bien !!!

en te souhaitant un excellent dimanche !!!!!

LN

Discussions similaires

menu en c

comment créer un sous menu

Partie entiére d'un nombre

Passer un tableau dynamique en paramètre

integrer une variable javascript dans un lien hypertext

Votre réponse

Discussions similaires