Votre question

Menu déroulant conditionné en trois colonnes

Tags :
  • Sites Internet
  • Programmation
Dernière réponse : dans Programmation
2 Avril 2010 09:30:42

Bonjour,
Je suis entrain de créer un site internet avec un menu déroulant horizontal à trois colonnes, de type catalogue pour un ensemble de produits (marque, modèle et type)
et je voudrais faire en sorte que l'utilisateur en selectionnant la marque, choisisse un modèle puis le type et se redirige directement vers la fiche produit qu'il désire (url vers page extérieure).
Comme je ne suis pas informaticien j'ai cherché sur le forum et j'ai trouvé ceci:

voici le code :



  1. <html>
  2. <title>liste déroulante dynamique</title>
  3. <head>
  4. <script language="Javascript" type="text/javascript" >
  5. function choix(formulaire)
  6. {
  7. var j;
  8. var i = formulaire.boite1.selectedIndex;
  9. if (i == 0)
  10. for(j = 1; j <3; j++)
  11. formulaire.boite2.options[j].text=""
  12.  
  13.  
  14.  
  15. else{
  16. switch (i){
  17. case 1 : var text = new Array("TYPE A1","TYPE A2","TYPE A3");
  18. break;
  19. case 2 : var text = new Array("TYPE B1","TYPE B2","TYPE B3");
  20. break;
  21. case 3 : var text = new Array("TYPE C1","TYPE C2","TYPE C3");
  22. break;
  23.  
  24. }
  25.  
  26. for(j = 0; j<3; j++)
  27. formulaire.boite2.options[j+1].text=text[j];
  28. }
  29. formulaire.boite2.selectedIndex=0;
  30. }
  31. </script>
  32. </head>
  33. <body>
  34. <form name="formulaire">
  35. <select name="boite1" onChange="choix(this.form)">
  36. <option selected>...........Choisissez un modèle...........</option>
  37. <option>MODELE A</option>
  38. <option>MODELE B</option>
  39. <option>MODELE C</option>
  40.  
  41.  
  42. </select>
  43.  
  44. <select name="boite2">
  45. <option selected>...........Séléctionnez un type...........</option>
  46. <option></option>
  47. <option></option>
  48. <option></option>
  49.  
  50.  
  51. <input type="button" name="go_button" id= "go_button" value="Aller" onclick="MM_jumpMenuGo('jumpMenu','parent',0)" /> </body>
  52.  
  53.  
  54. </form>
  55. </select>
  56. </body>
  57. </html>




fin du code



Alors c'est exactement ce que je veux, mais avec la colonne "MARQUE" tout a gauche. et un bouton "aller" ou "valider" fonctioonel,

Est ce réalisable? sinon y'a t il qqchose de plus simple?

Je vous en suis très reconnaissant et merci pour votre aide!!!

Autres pages sur : menu deroulant conditionne trois colonnes

a c 232 L Programmation
3 Avril 2010 13:00:35

Salut,

  1. <html>
  2. <title>liste déroulante dynamique</title>
  3. <head>
  4. <script language="Javascript" type="text/javascript" >
  5. function choix(formulaire)
  6. {
  7. var j;
  8. var i = formulaire.boite1.selectedIndex;
  9. if (i == 0)
  10. for(j = 1; j <3; j++)
  11. formulaire.boite2.options[j].text=""
  12. else{
  13. switch (i){
  14. case 1 : var text = new Array(new Array("TYPE A1", "http://www.google.fr"),new Array("TYPE A2", "http://www.tomsguide.fr"), new Array("TYPE A3", "http://www.infos-du-net.com/forum/"));
  15. break;
  16. case 2 : var text = new Array(new Array("TYPE B1", "http://www.google.fr"),new Array("TYPE B2", "http://www.tomsguide.fr"), new Array("TYPE B3", "http://www.infos-du-net.com/forum/"));
  17. break;
  18. case 3 : var text = new Array(new Array("TYPE C1", "http://www.google.fr"),new Array("TYPE C2", "http://www.tomsguide.fr"), new Array("TYPE C3", "http://www.infos-du-net.com/forum/"));
  19. break;
  20. }
  21. for(j = 0; j<3; j++) {
  22. formulaire.boite2.options[j+1].text=text[j][0];
  23. formulaire.boite2.options[j+1].value=text[j][1];
  24. }
  25. }
  26. formulaire.boite2.selectedIndex=0;
  27. }
  28. function goToUrl()
  29. {
  30. document.location = document.getElementById('boite2').options[document.getElementById('boite2').selectedIndex].value;
  31. }
  32. </script>
  33. </head>
  34. <body>
  35.  
  36. <form name="formulaire">
  37. <select name="boite1" onChange="choix(this.form)">
  38. <option selected>...........Choisissez un modèle...........</option>
  39. <option>MODELE A</option>
  40. <option>MODELE B</option>
  41. <option>MODELE C</option>
  42. </select>
  43. <select name="boite2" id="boite2">
  44. <option selected>...........Séléctionnez un type...........</option>
  45. <option></option>
  46. <option></option>
  47. <option></option>
  48. <input type="button" name="go_button" id= "go_button" value="Aller" onclick="goToUrl();" /> </body>
  49. </form>
  50. </select>
  51.  
  52. </body>
  53. </html>
m
0
l
Contenus similaires
3 Avril 2010 16:26:33

1000 1000 merci Omar, vous assurez!
c'est exactement ce qu'il me faut! :-)
m
0
l
a c 232 L Programmation
3 Avril 2010 17:32:30

Pas de soucis.

Par contre, tu devrais quand même être assez limitée par ce code. Vu que tu es limitée à avoir 3 options à chaque fois.

Enfin, si tu n'as que 3 options à chaque fois, ça peut aller, mais si tu as plus, tu risques de galérer.

(Et tu peux me tutoyer :) )
m
0
l
3 Avril 2010 22:06:01

Effectivement, j'ai plus d'options mais juste pour la question je me suis limitée à 3, histoire de simplifier la tâche. :-) je ferai la suite
Et maintenant je suis entrain de mettre en place ce code, et je me demande bien s'il faut pas que je rajoute une autre liste déroulante à gauche nommée "MARQUE", pour limiter le nombre pages..
De sorte à obtenir Marque puis Modèle puis Type

Exemple:

MARQUE A

A1 (modèle)
A11 (type)
A12
A13
A2
A21 (type)
A22
A23
A3
A31 (type)
A32
A33
MARQUE B

pareil etc


Serait il possible de m'aider?

Merci d'avance

m
0
l
3 Avril 2010 23:38:42

pk ne pas passer par l AJAX?
m
0
l
a c 232 L Programmation
3 Avril 2010 23:54:36

belleoboisdormant a dit :
Effectivement, j'ai plus d'options mais juste pour la question je me suis limitée à 3, histoire de simplifier la tâche. :-) je ferai la suite
Et maintenant je suis entrain de mettre en place ce code, et je me demande bien s'il faut pas que je rajoute une autre liste déroulante à gauche nommée "MARQUE", pour limiter le nombre pages..
De sorte à obtenir Marque puis Modèle puis Type

Exemple:

MARQUE A

A1 (modèle)
A11 (type)
A12
A13
A2
A21 (type)
A22
A23
A3
A31 (type)
A32
A33
MARQUE B

pareil etc


Serait il possible de m'aider?

Merci d'avance


Bah ça serait plus ou moins le même principe.
Par contre, comme te dit guillaume, si tu as beaucoup d'éléments, ça serait mieux de faire une requête asynchrone qui te retourne les éléments pour un élément donné.
Par exemple, tu as une page PHP qui prend une marque donné (Marque A) et qui retourne tous les éléments associés à cette marque (A1, A2, A3...). Et quand tu sélectionnes un modèle (A1), il retourne tous les types de ce modèle (A11, A12, A13...)
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS