Besoin d'aide pour les listes déroulantes et javascript

Besoin d'aide pour les listes déroulantes et javascript - HTML/CSS - Programmation

Marsh Posté le 30-05-2006 à 23:52:55    

Bonjour,
 
J'ai récuperer le code suivant dans un site internet et je voudrais m'en servir pour faire une navigation a l'aide de deux listes déroulantes.
 
La premiere choisirai le pays et la seconde permettrai de choisir la ville, sachant que la list de ville s'est généré automatiquement en fonction de du choix de pays ( exemple : si je choisis france je vais avoir paris dans la seconde liste et si je choisis espagne je vais avoir madrid dans la liste.)
 
Le probleme du script que j'ai trouvé est que il n'est pas complet pour l'utilisation que je veux en faire.
 
En effet, j'ai besoin de pouvoir afficher une nouvelle page html en cliquant sur le second lien ( en choisissant la ville donc), ou bien en ayant un bouton "ok" ou "soumettre" directement pour se rendre a la bonne place ( donc en tenant compte des différents choix qui auront été fait dans les deux listes déroulantes.)
 
Voici le script dont je me suis servi dans ma page :
 

Code :
  1. <script type="text/javascript">
  2. <!-- Debut
  3. // JavaScript pris sur le site: "http://www.java.scripts-fr.com"
  5. function Choix(formulaire) {
  6. i = formulaire.Boite1.selectedIndex;
  8. /*
  9. Comme toujours, on débute ce javascript par la création d'une fonction. Ici elle recevra en argument le formulaire que l'on va nommer formulaire (oui je sais je suis original).
  10. Nous créons une variable i qui contiendra le numero d'ordre de l'élément sélectionné de la première boite à liste. Ceci est obtenu en utilisant la propriété SelectedIndex de l'objet select (qui, ici, a pour nom Boite1) précédé du nom du formulaire (pour l'exemple, formulaire.
  11. */
  13. if (i == 0) {
  14.   for (i=0;i<13;i++) {
  15.     formulaire.Boite2.options[i].text="";
  16.     }
  17.   return;
  18.   }
  20. /*
  21. Nous ouvrons une condition if pour être sur qu'aucun élément n'est encore selectioné (variable i vaut 0), puis une petite boucle for incrémentant i de 0 à 3 (ben oui on a 3 éléments...).
  22. Dans cette boucle nous allons écrire du texte, enfin on va plutôt écrire du vide ("" ), dans chaque objet option indéxé par i (de 0 à 3).
  23. Ceci est obtenu en utilisant la propriété text de l'objet option. Notre syntaxe est donc : NomDuFormulaire.NomdelaBoiteaListe.options[index].text="mon texte"
  24. Puis il nous suffit de retourner le tout avec l'instruction return
  25. */
  27. switch (i) {
  28. case 1 : var txt = new Array ('VilleAL1','VilleAL2','VilleAL3','VilleAL4','VilleAL5'); break;
  29. case 2 : var txt = new Array ('VilleCB1','VilleCB2','VilleCB3','VilleCB4','VilleCB5'); break;
  30. case 3 : var txt = new Array ('VilleIPE1','VilleIPE2','VilleIPE3','VilleIPE4','VilleIPE5'); break;
  31. case 4 : var txt = new Array ('VilleM1','VilleM2','VilleM3','VilleM4','VilleM5'); break;
  32. case 5 : var txt = new Array ('VilleNB1','VilleNB2','VilleES3','VilleES4','VilleES5'); break;
  33. case 6 : var txt = new Array ('VilleNE1','VilleNE2','VilleNE3','VilleNE4','VilleNE5'); break;
  34. case 7 : var txt = new Array ('VilleN1','VilleN2','VilleN3','VilleN4','VilleN5'); break;
  35. case 8 : var txt = new Array ('VilleON1','VilleON2','VilleON3','VilleON4','VilleON5'); break;
  36. case 9 : var txt = new Array ('VilleQC1','VilleQC2','VilleQC3','VilleQC4','VilleQC5'); break;
  37. case 10 : var txt = new Array ('VilleSA1','VilleSA2','VilleSA3','VilleSA4','VilleSA5'); break;
  38. case 11 : var txt = new Array ('VilleTNL1','VilleTNL2','VilleTNL3','VilleTNL4','VilleTNL5'); break;
  39. case 12 : var txt = new Array ('VilleTNO1','VilleTNO2','VilleTNO3','VilleTNO4','VilleTNO5'); break;
  40. case 13 : var txt = new Array ('VilleYU1','VilleYU2','VilleYU3','VilleYU4','VilleYU5'); break;
  41. }
  43. /*
  44. Nous utilisons ici l'instruction switch (qui permet d'évaluer le contenu d'une variable et de la comparer à des constantes, si une des constante est trouvée le jeu d'instruction est executé.
  45. Il ne nous reste plus qu'à définir nos variables. Pour cela on utilise : case ValeurATester : expression.
  46. Donc suivant la valeur de i on crée un nouveau tableau txt avec l'opérateur spécial new contenant les éléments a afficher.
  47. Puis enfin on ajoute l'instruction break qui met fin à l'instructions switch.
  48. */
  50. formulaire.Boite2.options[0].text="--- Choisissez une Ville ---";
  51. for (i=0;i<13;i++) {
  52.   formulaire.Boite2.options[i+1].text=txt[i];
  53. }
  54. }
  56. /*
  57. Il ne nous reste plus qu'à finir notre fonction en écrivant nos élements dans la seconde boite.
  58. On commence donc par mettre du texte pour le premier option, je ne reviens pas sur la technique pour le faire, elle est expliqué plus haut.
  59. Ensuite nous ouvrons une boucle for de 0 à 3 (toujours 3 éléments) et on écrit dans chaque option, pour chaque valeur de i+1 (ben oui le 0 c'est le texte qui dit de choisir) le texte correspondant du tableau txt.
  60. */
  62. // Fin -->
  63. </script>


 
Et dans mon html
 

Code :
  1. <div class="retrait">Province : </div><form action="#" name="formulaire"><!--formulaire de choix de centre d'achat-->
  2. <select name="Boite1" onChange='Choix(this.form)'>
  3. <option selected>--- Choisissez une province ---</option>
  4. <option>Alberta</option>
  5. <option>Colombie Britannique</option>
  6. <option>Île-du-prince-Édouard</option>
  7. <option>Manitoba</option>
  8. <option>Nouveau-Brunswick</option>
  9. <option>Nouvelle Écosse</option>
  10. <option>Nunavut</option>
  11. <option>Ontario</option>
  12. <option>Québec</option>
  13. <option>Saskatchewan</option>
  14. <option>Terre-Neuve-et-Labrador</option>
  15. <option>Territoires du Nord-Ouest</option>
  16. <option>Yukon</option>
  17. </option>
  18. </select>
  20. <h4>Ville : </h4>
  22. <select name="Boite2">
  23. <option selected>--- Choisissez une ville ---</option>
  24. <option></option>
  25. <option></option>
  26. <option></option>
  27. <option></option>
  28. <option></option>
  29. </select>
  30. </form>


 
Merci d'avance pour votre aide

Reply

Marsh Posté le 30-05-2006 à 23:52:55   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed