Partage
  • Partager sur Facebook
  • Partager sur Twitter

listes déroulantes dynamiques liées envoyant sur une url

Plastifieurs
    21 juillet 2010 à 20:45:06

    Bonjour à toutes et tous,

    Je suis nouveau sur ce forum, enchanté!

    Je sollicite votre aide pour savoir si ce que je voudrai faire est possible. Je souhaite avoir des listes déroulantes liées mais que dès qu'on clique sur une des options de la dernière liste cela nous envoie vers une page web prédéfinie.

    Pour me situer, je suis un grand bidouilleur. Je maitrise pas trop mal xhtml/css mais en ce qui concerne javascript et php, c'est des chose dont j'arrive à peu près à comprendre la syntaxe, à force de les côtoyer, mais je suis pas développeur, j'apprends au fur et à mesure.

    Par conséquent, je voudrais savoir si ce que je veux est possible à réaliser déjà? J'ai vu un article sur le fait de lier les listes déroulantes et j'ai vu l'article suivant sur la liste déroulante (http://www.thelin.net/laurent/labo/js/listederoulante.html) ou la sélection envoie sur une page prédéfinie. Je veux juste faire le croisement des deux. En théorie ca devrait être envisageable?

    Merci d'avance pour le temps que vous m'accorderez.

    Cordialement

    Bruno
    • Partager sur Facebook
    • Partager sur Twitter
    LCaba
    • Javascript
      22 juillet 2010 à 0:03:41

      Salut,
      Si tu sais faire les deux, il n'y a aucune difficulté pour les combiner.

      Le tuto que tu donne est très vieux est utilise de mauvaises pratiques du js.
      Pour les listes liées, lis plutôt celui-ci : http://www.siteduzero.com/tutoriel-3-1 [...] prequest.html

      Ensuite, lorsque tu génère le dernier select, tu n'as qu'à ajouter un onchange qui redirige vers la page de ton choix
      • Partager sur Facebook
      • Partager sur Twitter
      Cabinet vétérinaire à Angers
      Plastifieurs
        22 juillet 2010 à 10:23:13

        [quote]Si tu sais faire les deux, il n'y a aucune difficulté pour les combiner. [/quote] En fait je sais pas faire ni l'une ni l'autre j'ai trouvé ces formules sur le web. J'arrive à comprendre le raisonnement et je pense pouvoir modifier les choses qui m'intéresse

        En fait, le but profond de la manœuvre est de me servir de ces listes comme d'un filtre de recherche.

        Pour mieux comprendre, je t'invite à jeter un bref coup d'œil à mon site (mon pseudo en .com). Il s'agit d'un oscommerce. Le système de recherche ne me plait pas. Je veux donc mettre en place un système de filtres.

        Et je ne veux pas le faire en php, je veux que le filtre dirige sur les pages en dur que je veux, et pas sur des pages générées en php par oscommerce. Et je souhaite tout faire en javascript car je ne veux pas mettre les mains dans la base de données (une vrai usine à gaz!).

        Donc il y aura un filtre de recherche général avec 3 voir 4 listes liées (la dernière étant "cliquable") et pour chaque famille de produit, un filtre de recherche plus petit avec 2 à 3 listes liées selon toujours le même principe.

        Par conséquent, j'ai besoin de javascript uniquement, il ne faut pas que ca mèle php et base de données.

        [quote]Le tuto que tu donne est très vieux est utilise de mauvaises pratiques du js.
        Pour les listes liées, lis plutôt celui-ci : http://www.siteduzero.com/tutoriel-3-1 [...] prequest.html[/quote]

        En fait pour les listes liées j'ai trouvé ca :

        <html>
        <head>
        <script type="text/javascript" language="javascript">
        var pays = new Array; //nouveau tableau
        pays[0] = new Array("p0", "pays0"); //nouveau tableau, on va donc avoir pays[0][0]="p0"
        pays[1] = new Array("p1", "pays1");
        pays[2] = new Array("p2", "pays2");

        var ville=new Array;
        // pays0
        ville["p0"] = new Array;
        ville["p0"][0] = new Array("p0v0", "pays0-ville0");
        ville["p0"][1] = new Array("p0v1", "pays0-ville1");

        //pays1
        ville["p1"]=new Array;
        ville["p1"][0] = new Array("p1v0", "pays1-ville0");
        ville["p1"][1] = new Array("p1v1", "pays1-ville1");

        //pays2
        ville["p2"] = new Array;
        ville["p2"][0] = new Array("p2v0", "pays2-ville0");
        ville["p2"][1] = new Array("p2v1", "pays2-ville1");


        var rue = new Array;
        //pays0-ville0
        rue["p0v0"] = new Array;
        rue["p0v0"][0] = new Array("p0v0r0", "pays0-ville0-rue0");
        rue["p0v0"][1] = new Array("p0v0r1", "pays0-ville0-rue1");

        //pays0-ville1
        rue["p0v1"] = new Array;
        rue["p0v1"][0] = new Array("p0v1r0", "pays0-ville1-rue0");
        rue["p0v1"][1] = new Array("p0v1r1", "pays0-ville1-rue1");
        rue["p0v1"][2] = new Array("p0v1r2", "pays0-ville1-rue2");


        //pays1-ville0
        rue["p1v0"] = new Array;
        rue["p1v0"][0] = new Array("p1v0r0", "pays1-ville0-rue0");
        rue["p1v0"][1] = new Array("p1v0r1", "pays1-ville0-rue1");

        //pays1-ville1
        rue["p1v1"] = new Array;
        rue["p1v1"][0] = new Array("p1v1r0", "pays1-ville1-rue0");
        rue["p1v1"][1] = new Array("p1v1r1", "pays1-ville1-rue1");


        //pays2-ville0
        rue["p2v0"] = new Array;
        rue["p2v0"][0] = new Array("p2v0r0", "pays2-ville0-rue0");
        rue["p2v0"][1] = new Array("p2v0r1", "pays2-ville0-rue1");

        //pays1-ville1
        rue["p2v1"] = new Array;
        rue["p2v1"][0] = new Array("p2v1r0", "pays2-ville1-rue0");
        rue["p2v1"][1] = new Array("p2v1r1", "pays2-ville1-rue1");
        rue["p2v1"][2] = new Array("p2v1r2", "pays2-ville1-rue2");
        function filltheselect(liste, choix)
        {switch (liste)
        {
        case "listepays":
        raz("listeville");
        raz("listerue");
        for (i=0; i<ville[choix].length; i++)
        {
        new_option = new Option(ville[choix][i][1],ville[choix][i][0]);
        document.formu.elements["listeville"].
        options[document.formu.elements["listeville"].length]=new_option;
        }
        for (i=0; i<rue[choix+"v0"].length; i++)
        {
        new_option = new Option(rue[choix+"v0"][i][1],rue[choix+"v0"][i][0]);
        document.formu.elements["listerue"].options[document.formu.
        elements["listerue"].length]=new_option;
        }
        break;
        case "listeville":
        raz("listerue");
        for (i=0; i<rue[choix].length; i++)
        {
        new_option = new Option(rue[choix][i][1],rue[choix][i][0]);
        document.formu.elements["listerue"].options[document.formu.
        elements["listerue"].length]=new_option;
        }
        break;
        }
        }

        function raz(liste)
        {l=document.formu.elements[liste].length;
        for (i=l; i>=0; i--)
        document.formu.elements[liste].options[i]=null;
        }
        </script>
        </head>
        <body>
        <form name="formu">

        Choisir un pays

        <select name="listepays" onChange='filltheselect(this.name, this.value)'>
        <script language="javascript">
        for (i=0; i<pays.length; i++)
        document.write("<option value=\"" +pays[i][0]+ "\">" +pays[i][1]);
        </script>
        </select>
        <br>

        Choisir une ville
        <select name="listeville" onChange='filltheselect(this.name, this.value)'>
        <script language="javascript">
        for (i=0; i<ville["p0"].length; i++)
        document.write("<option value=\"" +ville["p0"][i][0]+ "\">" +ville["p0"][i][1]);
        </script>
        </select>

        <br>

        Choisir une rue
        <select name="listerue">
        <script language="javascript">
        for (i=0; i<rue["p0v0"].length; i++)
        document.write("<option value=\"" +rue["p0v0"][i][0]+ "\">" +rue["p0v0"][i][1]);
        </script>
        </select>

        </form>
        </body>
        </html>

        L'autre tutoriel cité est pour que la liste envoie sur une url

        Je reste à ta disposition pour toute info supplémentaire. Merci de ton aide en tout cas

        Bruno
        • Partager sur Facebook
        • Partager sur Twitter

        listes déroulantes dynamiques liées envoyant sur une url

        × 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