[Noob]Comment attribuer un lien à une liste déroulante liée

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Matgk26, 29 Août 2006.

  1. Matgk26
    Matgk26 Nouveau WRInaute
    Inscrit:
    21 Juillet 2006
    Messages:
    23
    J'aime reçus:
    0
    Bonjour à tous.

    Tout d'abord je tiens à m'excuser de ma noobitude, je suis ultra débutant en la matière...J'ai effectué une recherche sur le forum et la FAQ mais je n'ai pas trouvé mon bonheur (peut etre ai-je mal cherché).

    Je vous expose mon problème :
    Grace à mes faibles connaissances en JS et à beaucoup de recherches sur le net et tests, j'ai réussi à mettre en place deux listes déroulantes liées (whaouuuu l'exploit).

    Ma 2ieme liste est donc bien évidemment liée au choix fait dans ma 1ère. Je souhaite maintenant que lorsque un choix est sélectionné dans la deuxième liste, ce dernier entraine automatiquement une redirection vers une nouvelle page.

    Concrettement ma 1ere liste propose de choisir son pays, ma deuxième une région au sein du pays précédemment choisis et je veux que lorsque par exemple quelqu'un a choisis France>>>04-Alpes de Haute Provence, une nouvelle page s'ouvre automatiquement avec les coordonnées de magasins situés dans le 04 (chargement de la page 04.html). Pas de base de donnée mysql...

    Voici mon code actuel :
    Code:
    <head><SCRIPT language="JavaScript">
    <!--
    function Choix(form) {
    i = form.pays.selectedIndex;
    form.dep.options.length=0;
     Item = new Option("Choose your region", "", false, false);
     form.dep.options[0]=Item;
    form.dep.selectedIndex = 0;
    switch (i) {
    case 1 : var txt = new Array ('04 - Alpes de Haute Provence ','05 - Hautes Alpes','06 - Alpes Maritimes','09 – Ariège','13 - Bouches du Rhône','17 - Charente Maritime','29 - Finistère','30 – Gard','31 - Haute Garonne','33 - Gironde','34 - Hérault','38 – Isère','40 - Landes','44 - Loire Atlantique','56 - Morbihan','64 - Pyrénées Atlantiques','65 - Hautes Pyrénées','66 - Pyrénées Orientales','69 – Rhône','73 - Savoie','74 - Haute Savoie','83 - Var','85 - Vendée'); break;
    case 2 : var txt = new Array ('Champery','Château d’Oex','Crans Montana','Haute Nendaz','Les Crozets','Les Diablerets','Leysin','Morgins','Verbier','Rougemont','Torgon','Villars sur Ollon ','Zermatt'); break;
    }
    
    for (i=0;i<txt.length;i++) {
      Item = new Option(txt[i], "4.html", false, false);
      form.dep.options[i+1]=Item;
      }
    } 
    // -->
    </SCRIPT>
    </head>
    <body>
    <FORM>
    	<SELECT NAME="pays" onChange='Choix(this.form)'>
    	   	<OPTION>--- Choose your country ---</OPTION>
    	   	<OPTION>France</OPTION>
    	   	<OPTION>Switzerland</OPTION>
    	</SELECT>
    
    	<SELECT NAME="dep">
    	   	<OPTION>--- Choose your region ---</OPTION>
    	</SELECT>
    
    </FORM>
    
    Si vous pouviez m'éclairer (en termes simples ^^) sur la marche à suivre...

    Merci d'avance.
     
  2. hipopulation
    hipopulation WRInaute occasionnel
    Inscrit:
    28 Juillet 2004
    Messages:
    288
    J'aime reçus:
    0
    et voilà :)

    Code:
    <head><SCRIPT language="JavaScript">
    <!--
    <!--
    function Choix(form) {
    i = form.pays.selectedIndex;
    form.dep.options.length=0;
     Item = new Option("Choose your region", "", false, false);
     form.dep.options[0]=Item;
    form.dep.selectedIndex = 0;
    switch (i) {
    case 1 : var txt = new Array ('04 - Alpes de Haute Provence ','05 - Hautes Alpes','06 - Alpes Maritimes','09 – Ariège','13 - Bouches du Rhône','17 - Charente Maritime','29 - Finistère','30 – Gard','31 - Haute Garonne','33 - Gironde','34 - Hérault','38 – Isère','40 - Landes','44 - Loire Atlantique','56 - Morbihan','64 - Pyrénées Atlantiques','65 - Hautes Pyrénées','66 - Pyrénées Orientales','69 – Rhône','73 - Savoie','74 - Haute Savoie','83 - Var','85 - Vendée'); break;
    case 2 : var txt = new Array ('Champery','Château d’Oex','Crans Montana','Haute Nendaz','Les Crozets','Les Diablerets','Leysin','Morgins','Verbier','Rougemont','Torgon','Villars sur Ollon ','Zermatt'); break;
    }
    
    for (i=0;i<txt.length;i++) {
      Item = new Option(txt[i], "4.html", false, false);
      form.dep.options[i+1]=Item;
      }
    }
    // -->
    
    function MM_jumpMenu(targ,selObj,restore){ //v3.0
      eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
      if (restore) selObj.selectedIndex=0;
    }
    //-->
    </SCRIPT>
    </head>
    <body>
    <FORM>
       <p>
         <SELECT NAME="pays" onChange='Choix(this.form)'>
               <OPTION>--- Choose your country ---</OPTION>
               <OPTION>France</OPTION>
               <OPTION>Switzerland</OPTION>
         </SELECT>
      
       <SELECT NAME="dep" onChange="MM_jumpMenu('parent',this,0)">
              <OPTION>--- Choose your region ---</OPTION>
         </SELECT>
      </p>
    </FORM> 
    
    
     
  3. Matgk26
    Matgk26 Nouveau WRInaute
    Inscrit:
    21 Juillet 2006
    Messages:
    23
    J'aime reçus:
    0
    Merci beaucoup pour ce bon début de solution (je tente de décrypter ta manipulation ^^).

    Complément à mon problème initial : en fait chaque choix dans ma liste 2 (les départements) pointe vers une url différente...genre si tu choisis le departement 04 dans la liste il faudrait tomber sur la page 4.html, si tu choisis le departement 05 etre redirigé vers la page 5.html et ainsi de suite...

    Je cherche comment faire en tentant de comprendre et d'adapter ta fonction tout noob que je suis.

    Mais j'avoue que si tu peux me donner un petit coup de pouce supplémentaire, ce n'est pas de refus :)
     
  4. hipopulation
    hipopulation WRInaute occasionnel
    Inscrit:
    28 Juillet 2004
    Messages:
    288
    J'aime reçus:
    0
    et voilà, j'ai simplement rajouter une variable url avec les liens :

    Code:
    <head><SCRIPT language="JavaScript">
    <!--
    <!--
    function Choix(form) {
    i = form.pays.selectedIndex;
    form.dep.options.length=0;
     Item = new Option("Choose your region", "", false, false);
     form.dep.options[0]=Item;
    form.dep.selectedIndex = 0;
    switch (i) {
    case 1 : 
    var txt = new Array ('04 - Alpes de Haute Provence ','05 - Hautes Alpes','06 - Alpes Maritimes','09 – Ariège','13 - Bouches du Rhône','17 - Charente Maritime','29 - Finistère','30 – Gard','31 - Haute Garonne','33 - Gironde','34 - Hérault','38 – Isère','40 - Landes','44 - Loire Atlantique','56 - Morbihan','64 - Pyrénées Atlantiques','65 - Hautes Pyrénées','66 - Pyrénées Orientales','69 – Rhône','73 - Savoie','74 - Haute Savoie','83 - Var','85 - Vendée');
    var url = new Array ('1.html','2.html','3.html','4.html','5.html','6.html','7.html','8.html','9.html','10.html','11.html','12.html','13.html','14.html','15.html','16.html','17.html','18.html','19.html','20.html','21.html','22.html','23.html');
    break;
    case 2 : 
    var txt = new Array ('Champery','Château d’Oex','Crans Montana','Haute Nendaz','Les Crozets','Les Diablerets','Leysin','Morgins','Verbier','Rougemont','Torgon','Villars sur Ollon ','Zermatt');
    var url = new Array ('24.html','25.html','26.html','27.html','28.html','29.html','30.html','31.html','32.html','33.html','34.html','35.html','36.html');
    break;
    }
    
    for (i=0;i<txt.length;i++) {
      Item = new Option(txt[i], url[i], false, false);
      form.dep.options[i+1]=Item;
      }
    }
    // -->
    
    function MM_jumpMenu(targ,selObj,restore){ //v3.0
      eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
      if (restore) selObj.selectedIndex=0;
    }
    //-->
    </SCRIPT>
    </head>
    <body>
    <FORM>
       <p>
         <SELECT NAME="pays" onChange='Choix(this.form)'>
               <OPTION>--- Choose your country ---</OPTION>
               <OPTION>France</OPTION>
               <OPTION>Switzerland</OPTION>
         </SELECT>
      
       <SELECT NAME="dep" onChange="MM_jumpMenu('parent',this,0)">
              <OPTION>--- Choose your region ---</OPTION>
         </SELECT>
      </p>
    </FORM> 
    
    
     
  5. AdRi1
    AdRi1 Nouveau WRInaute
    Inscrit:
    13 Avril 2006
    Messages:
    41
    J'aime reçus:
    0
    Code:
    <head><SCRIPT language="JavaScript">
    <!--
    <!--
    function Choix(form) {
    i = form.pays.selectedIndex;
    form.dep.options.length=0;
     Item = new Option("Choose your region", "", false, false);
     form.dep.options[0]=Item;
    form.dep.selectedIndex = 0;
    switch (i) {
    case 1 : var txt = new Array ('04 - Alpes de Haute Provence ','05 - Hautes Alpes','06 - Alpes Maritimes','09 – Ariège','13 - Bouches du Rhône','17 - Charente Maritime','29 - Finistère','30 – Gard','31 - Haute Garonne','33 - Gironde','34 - Hérault','38 – Isère','40 - Landes','44 - Loire Atlantique','56 - Morbihan','64 - Pyrénées Atlantiques','65 - Hautes Pyrénées','66 - Pyrénées Orientales','69 – Rhône','73 - Savoie','74 - Haute Savoie','83 - Var','85 - Vendée');
    var txt2 = new Array (4,5,6,9,13,17,29,30,31,33,34,38,40,44,56,64,65,66,69,73,74,83,85);
    break;
    case 2 : var txt = new Array ('Champery','Château d’Oex','Crans Montana','Haute Nendaz','Les Crozets','Les Diablerets','Leysin','Morgins','Verbier','Rougemont','Torgon','Villars sur Ollon ','Zermatt');
    var txt2 = txt;
    break;
    }
    
    for (i=0;i<txt.length;i++) {
      Item = new Option(txt[i], txt2[i]+".html", false, false);
      form.dep.options[i+1]=Item;
      }
    }
    // -->
    
    function MM_jumpMenu(targ,selObj,restore){ //v3.0
      eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
      if (restore) selObj.selectedIndex=0;
    }
    //-->
    </SCRIPT>
    </head>
    <body>
    <FORM>
       <p>
         <SELECT NAME="pays" onChange='Choix(this.form)'>
               <OPTION>--- Choose your country ---</OPTION>
               <OPTION>France</OPTION>
               <OPTION>Switzerland</OPTION>
         </SELECT>
      
       <SELECT NAME="dep" onChange="MM_jumpMenu('parent',this,0)">
              <OPTION>--- Choose your region ---</OPTION>
         </SELECT>
      </p>
    </FORM> 
    
    J'ai aucune idée de si ça marche, je sais même pas si on peut déclarer deux variables différentes pour un case dans un switch()...
    Mais bon, essaye toujours, on sait jamais xD

    edit : grilled :lol:

    edit 2 : la ligne var txt2 = txt; est là car j'ai considéré que pour la Suisse, tu redirigerais vers des pages du type "Champery.html" etc... Mais bon, pas top comme solution =/
     
  6. hipopulation
    hipopulation WRInaute occasionnel
    Inscrit:
    28 Juillet 2004
    Messages:
    288
    J'aime reçus:
    0
  7. Matgk26
    Matgk26 Nouveau WRInaute
    Inscrit:
    21 Juillet 2006
    Messages:
    23
    J'aime reçus:
    0
    Merci beaucoup les gars.

    J'espère avoir un jour votre niveau pour vous renvoyer l'assenceur.
     
Chargement...
Similar Threads - [Noob]Comment attribuer lien Forum Date
CSS / Attribuer 2 couleurs différentes aux H2 Développement d'un site Web ou d'une appli mobile 12 Mars 2022
Attribuer le alt du logo en H1 qu'à la page d'accueil Débuter en référencement 21 Avril 2013
Attribuer une class en fonction d'un résultat Développement d'un site Web ou d'une appli mobile 25 Septembre 2008
[RESOLU] Redirection :Attribuer une page à un nom de domaine Débuter en référencement 17 Mars 2008
Comment attribuer un include a un bouton? Développement d'un site Web ou d'une appli mobile 18 Mai 2006