Se connecter avec
S'enregistrer | Connectez-vous

Menu déroulant conditionné en trois colonnes

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte
Expert Programmation

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", "<a href="http://www.google.fr" target="_blank">http://www.google.fr</a>"),new Array("TYPE A2", "<a href="http://www.tomsguide.fr" target="_blank">http://www.tomsguide.fr</a>"), new Array("TYPE A3", "<a href="http://www.infos-du-net.com/forum/" target="_blank">http://www.infos-du-net.com/forum/</a>"));
    

  15. 		break;
    

  16. 		case 2 : var text = new Array(new Array("TYPE B1", "<a href="http://www.google.fr" target="_blank">http://www.google.fr</a>"),new Array("TYPE B2", "<a href="http://www.tomsguide.fr" target="_blank">http://www.tomsguide.fr</a>"), new Array("TYPE B3", "<a href="http://www.infos-du-net.com/forum/" target="_blank">http://www.infos-du-net.com/forum/</a>"));
    

  17. 		break;
    

  18. 		case 3 : var text = new Array(new Array("TYPE C1", "<a href="http://www.google.fr" target="_blank">http://www.google.fr</a>"),new Array("TYPE C2", "<a href="http://www.tomsguide.fr" target="_blank">http://www.tomsguide.fr</a>"), new Array("TYPE C3", "<a href="http://www.infos-du-net.com/forum/" target="_blank">http://www.infos-du-net.com/forum/</a>"));
    

  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>
Expert Programmation

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 :) )

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

Expert Programmation

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...)
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde