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

Matgk26 · 29 Août 2006

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.

hipopulation · 29 Août 2006

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>

Matgk26 · 29 Août 2006

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

hipopulation · 29 Août 2006

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>

AdRi1 · 29 Août 2006

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

hipopulation · 29 Août 2006

Matgk26 · 29 Août 2006

Merci beaucoup les gars.

J'espère avoir un jour votre niveau pour vous renvoyer l'assenceur.