Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu Déroulant multi liste

7 infos pour 1 page

Sujet résolu
    11 mars 2009 à 17:47:45

    Bonjour,

    J'essaye désespérément de créer un menu déroulant à 7 listes basé sur cet exemple http://www.jejavascript.net/menux2sim.php
    Vu que je débute là dedans, j'ai un petit lot de questions pour apprendre :)

    1) ça marche à 7 ou c'est réservé à 2 listes ? Si réservé à 2, pourquoi :? - si c'est réservé 2, c'est que j'ai rien compris :)
    2) Que faut-il mettre dans <form action="" > dans ce cas précis car je me sens dépassé. ( une explication en prime s'il vous plait pour m'aider à interpréter ? sachant que j'ai commencé y'a 1 mois et que je me suis gavé de HTML/CSS, que je me bats ac VOS amis php et mysql mais que j'ai pondu mes 1ers formulaires la semaine dernière - histoire de dire que je vient pas voler des codes sans rien y comprendre - )

    Merci d'avance pour votre aide
    • Partager sur Facebook
    • Partager sur Twitter
      11 mars 2009 à 18:56:59

      Bonjour,
      J'ai du mal à comprendre le terme: "menu déroulant à 7 listes" je pense que tu veux dire "7 menus à liste déroulante" (la nuance est peut-être subtile mais je ne sais pas faire UN menu avec 7 listes en HTML) ce qui semble être confirmé par le titre de la page que tu nous montre

      Alors décortiquons le code javascript:

      function process(form)
      {
      	...
      }
      

      C'est la déclaration d'une fonction nommé 'process' et qui a pour argument une variable nommée 'form'

      regardons quand est appelée cette fonction:
      <input type="button" value="Select" onClick="process(this.form)" name="button">
      

      Donc cette fonction est appelée lorsqu'on clique sur ce boutton.
      A ce moment la valeur de notre argument 'form' est un lien vers l'élément DOM <form> où se trouve ce boutton

      Regardons ce qu'il y a à l'intérieur:
      var choix1=form.choix1.options[form.choix1.selectedIndex].value;
      var choix2=form.choix2.options[form.choix2.selectedIndex].value;
      

      Ici 2 variables (choix1 et choix2) sont déclarées. En fait ce code fonctionnerait mieux (et serait plus facile à lire) de cette manière:
      var choix1=form.choix1.value;
      var choix2=form.choix2.value;
      
      (Ça fait exactement la même chose)
      donc là on voit beaucoup mieux qu'on assigne à ces variables la valeur courante d'une liste déroulante (respectivement celles nommées choix1 et choix2) située dans le formulaire.

      ensuite:
      var adresse=choix1+choix2+".htm";
      

      + est une concaténation de chaînes.
      Ainsi ici, on concatène la valeur de choix1 à celle de choix2 et avec ".htm" et on sauve le tout dans adresse

      et enfin:
      top.location.href=adresse
      
      on change la valeur de l'url de ta page pour prendre la valeur d' adresse.

      Donc si on avait dans le menu déroulant choix1 choisi la valeur "site" et dans le menu déroulant choix2 choisi la valeur "duzero" on serait alors redirigé maintenant vers la page "siteduzero.htm"

      Donc tu peux très bien ajouter d'autres listes déroulantes (autant que tu veux) mais il faudra à chaque fois ajouter au code javascript des variables qui récupéreront la valeurs de ces listes et les ajouteront à adresse.

      dans action tu ne mets rien car ce formulaire n'est pas destiné à être envoyé (puisqu'il te redirige vers une autre page)
      • Partager sur Facebook
      • Partager sur Twitter
        12 mars 2009 à 19:01:25

        Et la lumière fut :)

        Oui effectivement c'est ça ( mais j'ai du mal à m'exprimer :) )

        Merci infiniment pour ces explications
        Justement de ce que j'en avais compris, si par exemple dans mes listes j'ai différentes catégories
        function process(form)
        {
        var choix1=form.choix1.value;
        var choix2=form.choix2.value;
        var choix3=form.choix3.value;
        var choix4=form.choix4.value;
        var choix5=form.choix5.value;
        var choix6=form.choix6.value;
        var choix7=form.choix7.value;
        var adresse=choix1+choix2+choix3+choix4+choix5+choix6+choix7".htm";
        top.location.href=adresse
        }
        
        <div id="seekbars"><h3><form action="" name="Listes"><table id="seek" width="60%" height="50" border="0" cellpadding="0" cellspacing="0"><tr><td>
        <select size="1" name="choix1" id="Largeur" style="font-weight:bold; font-family: arial, arial black, time new roman; font-size:11px; color:blue; background-color: #b7c6f5; onchange=menuderoulant(this)">
                   <option value="0">Ecuries</option>
        	   <option value="1">Ferrari</option>
                   <option value="2">McLaren</option>
                   <option value="3">Ecurie1</option>
                   <option value="4">Ecurie2</option></select></td>
        <select size="1" name="choix2" id="Largeur"style="font-weight:bold; font-family: arial, arial black, time new roman; font-size:11px; color:blue; background-color: #b7c6f5; onchange=menuderoulant(this)">
                   <option value="0">Pilote</option>
        	   <option value="1">Mr Black</option>
                   <option value="2">Mr White</option>
                   <option value="3">Mr X</option>
                   <option value="4">Mr Z</option>
        </select></td></table><input type="button" value="RECHERCHER" onClick="process(this.form)" name="button"></form></h3>
        		   </div>
        


        Si la page de Mr Black de l'écurie ferrari s'appelle 11.htm, ou si la page de Mr X de l'écurie2 s'appelle 43.htm, elles devraient apparaitre en appuyant sur rechercher après avoir sélectionné dans la 1ère liste Ferrai ou Ecurie2 et dans la 2ème liste Mr Back ou Mr X ? ( et ainsi de suite ...) Ce qui n'arrive pas :)
        ( au passage si je change le htm de var adresse=choix1+choix2+".htm" en var adresse=choix1+choix2+".php" ça appelle une page php - genre 11.php ou 43.php - j'imagine :? ) Me manque-t-il quelquechose ?
        ( c'est mon code au passage à part les noms ^^ c'est un fichier à part que je teste :) )
        • Partager sur Facebook
        • Partager sur Twitter
          13 mars 2009 à 11:49:38

          oui si tu changes en var adresse=choix1+choix2+".php"
          ça appellera une page php genre 11.php

          attention, tes pages doivent être au même endroit que celle-ci. Si elles ne le sont pas il faudra que tu indiquent où elles se trouvent.
          Par exemple: si cette page est dans un répertoire, et dans ce même répertoire tu as un répertoire nommé "mespages" qui contient toutes tes pages cibles.
          Tu devras ajouter le chemin: var adresse="./mespages/"+choix1+choix2+".php"
          • Partager sur Facebook
          • Partager sur Twitter
            13 mars 2009 à 12:42:36

            Merci infiniment ça fonctionne :lol:
            j'avais plusieurs petites erreurs dans mon code :) + la compréhension de l'incompris... merci ^^
            • Partager sur Facebook
            • Partager sur Twitter

            Menu Déroulant multi liste

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown