begin process at 2012 05 29 09:41:47
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Menu déroulant avec contenu sélectif


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Menu déroulant avec contenu sélectif

vendredi 29 décembre 2006 à 14:47:44 | Menu déroulant avec contenu sélectif

helln06

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:  


 [code]
<!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>

[/code]
vendredi 29 décembre 2006 à 16:31:01 | Re : Menu déroulant avec contenu sélectif

PetoleTeam

Membre Club
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)


samedi 6 janvier 2007 à 12:04:39 | Re : Menu déroulant avec contenu sélectif

helln06

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
samedi 6 janvier 2007 à 12:39:46 | Re : Menu déroulant avec contenu sélectif

PetoleTeam

Membre Club
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 à
<body onload="showhide('all','none');">
qui devient donc
<body>
et les DIVs deviennent
<div id="sma1" style="display:none;">Texte adapté à la selection 1</div>
<div id="sma2" style="display:none;">Texte adapté à la selection 2</div>
<div id="sma3" style="display:none;">Texte adapté à la selection 3</div>
<div id="sma4" style="display:none;">Texte adapté à la selection 4</div>

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


samedi 6 janvier 2007 à 19:30:05 | Re : Menu déroulant avec contenu sélectif

helln06

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>

<body>

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

<div id="sma1" style="display:none;">Texte adapté à la selection 1</div>
<div id="sma2" style="display:none;">Texte adapté à la selection 2</div>
<div id="sma3" style="display:none;">Texte adapté à la selection 3</div>
<div id="sma4" style="display:none;">Texte adapté à la selection 4</div>

</body>

</html>


samedi 6 janvier 2007 à 22:37:19 | Re : Menu déroulant avec contenu sélectif

PetoleTeam

Membre Club
Réponse acceptée !


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>
<body>
<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>
<div id="sma1" style="display:none;">Texte adapté à la selection 1</div>
<div id="sma2" style="display:none;">Texte adapté à la selection 2</div>
<div id="sma3" style="display:none;">Texte adapté à la selection 3</div>
<div id="sma4" style="display:none;">Texte adapté à la selection 4</div>
</body>
</html>


Fais en bon usage...


;0)


dimanche 7 janvier 2007 à 13:20:07 | Re : Menu déroulant avec contenu sélectif

helln06

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




Cette discussion est classée dans : menu, style, document, getelementbyid, none


Répondre à ce message

Sujets en rapport avec ce message

block/none de div [ par kishkaya ] voila j'ai des contenu et j'essaye de creer une fonction pour cacher ou afficher ces div en m'inspirant d'une fonction trouver sur ce site . Moi j'ai pb de refresh de menu [ par tianet ] Bonsoir, Je voudrais faire un menu qui une fois qu'une option est sélectionnée une nouvelle page s'ouvre et que le menu reste selectionné à la bonne o code compatible Mozilla et IE [ par salim81 ] bonjour a tous! j'ai des script javascript qui sont compatible a Mozilla et les meme script en changeant bien sur quelques fonction compatible IE.je c Propriété display avec IE [ par initnocsib ] Bonjour,Voici un petit script qui fonctionne nickel sous Firefox, mais pas du tout sous IE function active(n){        document.getElementByI probleme de compatibilité de fonction javascript avec la balise <table> [ par misshasnae ] slt ts le mondej'ai un petit problème dans le code html de ma page de réservation, svp si quelq'un a une idée repond moi c urgent é merci d'avance. Balise <DIV [ par JCEY ] Bonjour, javascript:Insert_Emoticon('/imgs2/smile.gif');Je voulais en JS afficher une zone localité avec déroulant si l'on est en France ou en input t problème avec un menu [ par 77marsmars77 ] Bonjour à tous, J'ai un petit souci avec mon menu. Quand je clique sur le menu 1 il m'affiche les sous menus1. là c'est ok. Quand je clique sur le lie JS PARENT node [ par ghighidu63 ] Bonjour, j'ai crée ce sujet car j'ai besoin d'aide pour mon script. J'ai crée un truc pour Minimiser et Fermer un truc (Cacher/Afficher) Quand il y'en probleme avec mon code avec firefox et opera [ par savagestudio ] bonjour (mon clavier et en norvegien, desole [^^sad2]) , J ai u probleme avec mon code , il marche parfaitment avec safari, chrome,IE mais pas avec fi Modification dynamique d'un formulaire [ par Romain54000 ] Bonjour, Voila j'ai un probléme dont je ne trouve malheureusement pas de réponse. Je voudrai partir d'une liste déroulante avec plusieurs choix, suiv


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,686 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales