Se connecter / S'enregistrer
Votre question

[RESOLU] Probleme avec menus déroulant en HTML

Tags :
  • Select
  • Programmation
Dernière réponse : dans Programmation
26 Juillet 2006 11:24:03

Re bonjour c'est encore moi avec mes questions (debiles surement ;)  )
voila dans ma page HTML j'ai un menu déroulant et j'aimerais que lorsque l'on choisit une des options de ce menu déroulant un autre apparaissent ( a coté ou en bas peu importe) en fonction du choix fait au premier menu déroulant.
Je m'explique:
Menu déroulant 1 : choix 1 , choix 2
Si choix 1 cliqué => afficher menu déroulant 2
Si choix 2 cliqué => afficher menu déroulant 3

Je pense que dans le code il doit avoir un rapport avec le "onclick" mais je n'y arrive pas....
si l'un de vous pourrait m'aider ou me dire où je pourrai trouver un code de ce genre ce serait gentil.
merci d'avance

PS: j'aurai une autre question que je poserai ici dès que j'aurai la réponse a ma premiere pour eviter de créer plein de topic ^_^

Autres pages sur : resolu probleme menus deroulant html

26 Juillet 2006 11:25:53

On pourrait voir le code, ce serait plus simple ^o^
26 Juillet 2006 11:29:49

suffit de demander ^_^
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. Vous vouloir les personnes enregistrées à / aux :
  6. <form method="post" action="abo_pros.php">
  7. <select name="bdd" id="choix">
  8.  
  9. <option name="abonnements">abonnements</option>
  10. <option name="la prospection">la prospection</option>
  11. </select>
  12.  
  13. <input type="submit" name="validation" value="valider" >
  14. </form>
  15. </body>
  16. </html>


voili voilou. Pour l'instant c'est une page simple mais j'aimerais que lorsque l'on clique sur un des deux choix ben cela fasse apparaître un autre menu deroulant (en fonction de choix cliqué). C'est la mon probleme je ne sais pas comment faire...
Je me dis qu'il doit peut etre y avoir du javascript la desous mais c'est mon grand ami celui la ;-)
Contenus similaires
26 Juillet 2006 11:39:33

Essaye ca :

<html>
<head>
</head>
<body>
Vous vouloir les personnes enregistrées à / aux :
<?
if($bdd=="")
{
?>
<form name="form1" method="post" action="abo_pros.php">
<select name="bdd" id="choix">

<option name="abonnements">abonnements</option>
<option name="la prospection">la prospection</option>
</select>
<input type="submit" name="validation" value="valider" >
</form>
<?
}
elseif($select2=="")
{
?>
<!-- Si tu veux reafficher le premier select avec la valeur selectionnée-->
<form name="form1" method="post" action="abo_pros.php">
<select name="bdd" id="bdd">

<option name="abonnements" <? if($bdd=="abonnements")echo "selected";?>>abonnements</option>
<option name="la prospection" <? if($bdd=="la prospection")echo "selected";?>>la prospection</option>
</select>
<!-- 2eme select -->
<input type="submit" name="validation" value="valider" >
</form>
<form name="form2" method="post" action="abo_pros.php">
<select name="select2" id="select2">

<option name="1">option 1</option>
<option name="2">option 2</option>
</select>

<input type="submit" name="validation" value="valider" >
</form>

<?
}
else
{
?>
etc......
<?
}
?>
</body>
</html>
26 Juillet 2006 11:46:31

merci beaucoup pour ton code guizmo mais malheureusement ce n'est pas le resultat que j'aimerais avoir.
Si possible j'aimerais que lorsque l'on choisit "les abonnés" (1er menu deroulant) un second apparaisse en dessous du 1er avec des choix et tout et tou mais que le 3eme ne soit pas afficher tout en gardant le 1er menu afficher.
Et que lorsque l'on choisit "la prospection" (1er menu deroulant) le 3eme apparaisse toujours avec des choix mais que le deuxieme ne soit pas afficher....

merci encore d'avance
26 Juillet 2006 11:49:01

Voilà qui devrait mieux répondre à ta demande :
<html>
<head>
</head>
<body>
Vous vouloir les personnes enregistrées à / aux :
<?
if($bdd=="")
{
?>
<form name="form1" method="post" action="abo_pros.php">
<select name="bdd" id="choix">

<option name="abonnements">abonnements</option>
<option name="la prospection">la prospection</option>
</select>

<input type="submit" name="validation" value="valider" >
</form>
<?
}
elseif($select2=="" && $bdd=="abonnements")
{
?>
<!-- Si tu veux reafficher le premier select avec la valeur selectionnée-->
<form name="form1" method="post" action="abo_pros.php">
<select name="bdd" id="bdd">

<option name="abonnements" <? if($bdd=="abonnements")echo "selected";?>>abonnements</option>
<option name="la prospection" <? if($bdd=="la prospection")echo "selected";?>>la prospection</option>
</select>
<!-- 2eme select -->
<input type="submit" name="validation" value="valider" >
</form>
<form name="form2" method="post" action="abo_pros.php">
<select name="select2" id="select2">

<option name="1">option 1</option>
<option name="2">option 2</option>
</select>

<input type="submit" name="valider2" value="valider" >
</form>

<?
}
elseif($select2=="" && $bdd=="la prospection")
{
?>
<!-- Si tu veux reafficher le premier select avec la valeur selectionnée-->
<form name="form1" method="post" action="abo_pros.php">
<select name="bdd" id="bdd">

<option name="abonnements" <? if($bdd=="abonnements")echo "selected";?>>abonnements</option>
<option name="la prospection" <? if($bdd=="la prospection")echo "selected";?>>la prospection</option>
</select>
<!-- 2eme select -->
<input type="submit" name="validation" value="valider" >
</form>
<form name="form2" method="post" action="abo_pros.php">
<select name="select2" id="select2">

<option name="1">option 1</option>
<option name="2">option 2</option>
</select>

<input type="submit" name="valider2" value="valider" >
</form>

<?
}
?>
</body>
</html>
26 Juillet 2006 11:49:56

Tu peux jouer avec de lajax ou avec les style visibility pour eviter de recharger la page, ca fait plus jolie ;) 
26 Juillet 2006 11:53:31

euuuuh tu va surement vouloir m'etrangler mais c'est toujours pas ca....
en fait je ne veux pas que les 2eme et 3eme (et les autres) menu déroulant soient apparants au chargement de la page.
J'aimerais qu'il apparaissent uniquement lorsque l'on clique sur un des choix du 1er menu là est tout mon probleme...

EDIT pour Mout: euh kézako lajax ou style visibility?
visibility est une commande CSS, PHP...?
26 Juillet 2006 11:59:35

Euh désolé mais là je comprend pas bien.
Si tu valide ton premier select le second apparait suivant le choix que tu as fait dans le premier.

Exemple si tu choisis abonnements un select apparait
si tu choisis la prospection un select different apparait.

C'est bien ca que tu veux faire ?
26 Juillet 2006 11:59:54

Ouais utiliser Ajax serait le top, mais si tu n'arrive pas a faire ton onclick oublie un petit moment, ou deja il faut que tu arrives à faire ce que tu veux. Désolé j'ai pas tout lu (en particulier le code proposé), mais effectivement il faut que tu utilise onclik et ce onclick recharge la page avec des paramètres passés en GET.

En fonction des paramètres tu affiches ce que tu veux rien de plus simple, je reste à dispo apres la pasue du midi :D 
26 Juillet 2006 12:05:06

pour Guizmo: oui c'est tout a fait cela que je veux faire mais le code que tu me donne affiche directement tout les menus deroulants donc c'est pour cela que je disais que ca ne marchait pas....

pour imer: le onclick je ne le connais pas trop. mais j'aimerais bien m'en servir si tu connais un site/ code que je pourrais voir ce serait gentil.
Pour ce qui est de Ajax je ne connais pas qu'est ce que c'est?
a c 145 L Programmation
26 Juillet 2006 12:05:36

sinon il y a la possibilité de le faire uniquement en javascript, si les menus sont toujours les mêmes (et pas tirés d'une DB).

Je retrouverais ce soir un JS que j'avais fait à une époque fort reculée :) 
26 Juillet 2006 12:07:38

Soit tu as mal copier mon code soit il n'est pas interpreté car moi cela fonctionne sur mon test :-?
26 Juillet 2006 12:09:56

guizmo=> j'ai fait un copier/coller de ton code donc je comprend pas trop....


meric crazy cat mais je pense que ca va coller car il faut que je consulte une base de données donc le javascript risque de ne pas trop marcher :-s
26 Juillet 2006 12:18:08

  1. <select onclick="javascript:document.getElementById('nom').style.visibility=visible;">....</select>
  2.  
  3. <div id='nom' style="visibility:hidden"><select....</div>
26 Juillet 2006 12:25:00

Alors là c'est très bizarre :-o
Je comprend pas du tout. J'ai refait le test en prenant le code que j'ai collé, modifié mes "input" et ca marche chez moi.
26 Juillet 2006 12:28:11

euh .... apres quelques essais non concluants.....
la balise select avec le javascript doit bien etre dans le premier menu deroulant c'est ca?

ensuite la balise "div" doit regrouper le deuxieme ou troisieme menu déroulant a cacher c'est ca?

question: dans le getElementById('nom') le fameux nom correspond a quoi? l'attribut name que j'ai donné dans les options de mon 1er menu déroulant?

EDIT pour guizmo: oui j'ai modifier les input dans le code (j'avais pas vu que la balise était mal faite) mais je vais continuer d'essayer...

EDIT pour naphtaline: oui je connais du code HTML, le PHP j'apprend ca TRES activementdepuis avant hier. Le javascript je connais bien mais c'est pas mon ami donc j'ai du mal ;-)
26 Juillet 2006 12:30:51

lu all, j'ai remarquez que vous lui balancez du code php, tres bien j'aurais fait de même mais avant je me serait assuré qu'il sait ce que sait et que c'est un language interprété. Enfin peut ^tre qu'il le sait et que mon poste est inutile mais vu que le probleme est pas resolu on sait jamais.
26 Juillet 2006 13:19:22

apres moultes essais rien n'y fait ca ne marche pas.

le deuxieme code de guizmo afficher directement les cinq menus déroulant. j'ai essayé d'y modifier rien n'y fait.

pour le bout de javascript ben je l'ai mis un peu partout (en reflechissant bien sur). j'arrive a cacher un menu deroulant mais je n'arrive plus a le faire ré apparaitre surement une erreur bete que je ne comprend pas.

si vous pouviez essayer de m'aider encore je vous en serait infiniment reconnaissant.
un homme au bord de la crise de nerf et de la pendaison ;-)

je suis pret a éditer ce message si vous voulez voir les codes que vous m'avez donné et que j'ai modifié...
26 Juillet 2006 13:36:47

Je vais pas détailler comment appeler une fonction javascript, je considere que ça tu y arrives
  1. function reload_page()
  2. {
  3. i=document.NOM_FORMULAIRE.NOM_LISTE_DEROULANTE.value;
  4.  
  5. location.replace('TA_PAGE.php?id_liste='+i);
  6. }


ensuite dans TA_PAGE.php tu controles les traitements
  1. if($_GET['id_liste']=="ce que tu veux")
  2. {
  3. //afiche liste deroulante correspondante
  4. }


Essaie pas de copier/coller ça marchera pas

Pour ce qui est de ajax tu peux afficher les listes deroulantes comme tu le souhaites sans recharger la page, de maniere quasi instantané avec un message de chargement si besoin pour informer l'utilisateur que le navigateur travail
26 Juillet 2006 13:47:52

euh...
dans la fonction reload_page:

location.replace (Ta_PAGE.php?id_liste='+i);

le probleme est que je travaille sur une page html....

j'ai un premier menu (dans une page html) qui fait apparaitre un deuxieme menu en fonction des choix du premier (toujours en html).
et enfin les choix possibles dans le deuxieme menu utiliserons du PHP qui va interroger une base de données.

PS: j'ai peut etre mal compris le java script (oui car je suis pas copain avec java script ^^ ) ou d'autre truc....
26 Juillet 2006 13:53:26

euuuuhhh .... ouais....

pourquoi tu travail sur une page HTML alors que le code que l'on t'as proposé comporte du php...

Revoie les bases et lorsque tu auras réussi à afficher une msgbox sur onclick on pourra aller plus loin (oublie Ajax)
26 Juillet 2006 13:55:09

Le nom c'est l'id du DIV !!!
26 Juillet 2006 14:04:41

lol imer j'avais prévenu que javascript etait pas mon copain ;-)

Mout59 => c'est bien ce que je pensais mais cela ne marche pas. J'ai d'abord eu un message d'erreur qui me disait que la method POST etait interdite dans mon premier formulaire (logique j'ai supprimé "action" ). Et lorsque je clique sur le bouton valider (qui devrait m'afficher le menu cacher par la fonction javascript) le menu déroulant ne s'affiche pas.

Voici le code que j'ai avec le code que tu m'a donné pour cacher un bout de formulaire...
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. Vous vouloir les personnes enregistrées à / aux :
  6. <form>
  7. <select name="bdd" id="choix" onclick="java script:document.getElementById('nom').style.visibility=visible;">
  8. <option name="abonnements">abonnements</option>
  9. <option name="la prospection">la prospection</option>
  10. </select>
  11.  
  12. <input type="submit" name="validation" value="valider" >
  13. </form>
  14. <form method="post" action="abo_pros.php">
  15. <div id='nom' style="visibility:hidden">
  16. <select name="bdd" id="choix">
  17.  
  18. <option name="abonnements">abonnements</option>
  19. <option name="la prospection">la prospection</option>
  20. </select>
  21. </div>
  22. <input type="submit" name="validation" value="valider" >
  23. </form>
  24. </body>
  25. </html>
26 Juillet 2006 14:09:38

Re

Forcement que mon code ne marche pas si tu ne "travail", "code" pas sur une page .php .
Tu dois appele la meme page pour le code fonctionne donc dans ton cas mon code dois se trouver sur la page abo_pros.php (dans ton cas toujours).
26 Juillet 2006 14:21:51

oui il est vrai que ca marche mieux.
Je n'avais pas compris qu'il fallait mettre ton code dans la page php et non dans la page html.

maintenant j'ai des erreurs:
la premiere etait que la variable $bdd etait pas dèfinie donc j'ai mis ceci
$bdd = $_POST['bdd']
la deuxieme sur laquelle je bloque est la variable $select2
j'ai essayé de la déclarer mais j'ai eu le droit a un joli "parse error".
pourrait tu m'aider (encore) s'il te plait
26 Juillet 2006 14:24:37

la variable $select2 est la valeur que va renvoyer ta deuxieme liste de choix(la 2eme balise select qui se nomme select2).
Elle sera toujours vide tant que tu n'auras pas appuyer sur le bouton valider de la 2eme liste de choix.

26 Juillet 2006 14:29:44

d'accord je l'ai déclaré comme il faut je pense:
$select2 = $_POST['select2']

mais dans cette partie du code:
  1. <?
  2. }
  3. $select2 = $_POST['select2'];
  4. elseif($select2=="" && $bdd=="abonnements")
  5. {
  6. ?>
  7. <!-- Si tu veux reafficher le premier select avec la valeur selectionnée-->
  8. <form name="form1" method="post" action="abo_pros.php">
  9. <select name="bdd" id="bdd">
  10.  
  11. <option name="abonnements" <? if($bdd=="abonnements")echo "selected";?>>abonnements</option>
  12. <option name="la prospection" <? if($bdd=="la prospection")echo "selected";?>>la prospection</option>
  13. </select>
  14. <!-- 2eme select -->
  15. <input type="submit" name="validation" value="valider" >
  16. </form>
  17. <form name="form2" method="post" action="abo_pros.php">
  18. <select name="select2" id="select2">
  19.  
  20. <option name="1">option 1</option>
  21. <option name="2">option 2</option>
  22. </select>
  23.  
  24. <input type="submit" name="valider2" value="valider" >
  25. </form>

j'ai un message d'erreur qui me dit que j'ai un parse error à la ligne où il y le "elseif"
26 Juillet 2006 14:31:14

point virgule :grrr:

elseif pas lieu d'etre si pas de if avant, enfin manque peut etre du code je sais pas
26 Juillet 2006 14:33:55

Pas besoin de la déclarer elle ne sert pas tant que tu n'as pas appuyer sur le bouton valider de la 2eme liste de choix.

De plus avec un ";" à la fin de cette dite ligne (qui encore une fois ne sert pas pour le moment) cela marcherais bien mieux :-D
26 Juillet 2006 14:35:06

oui je l'ai mis (apres avoir posté) ar je m'en suis apperuc apres.
mais l'erreur qui m'est dite viens juste apres sur la ligne du "elseif".
J'ai changé les accolade fermantes/ouvrantes pour voir mais rien...
26 Juillet 2006 14:38:28

Remet le code de la page en entier s'il te plait, pour voir si ca vient pas de plus haut ;-)


EDIT : avec les modifs que tu as apportées
26 Juillet 2006 14:40:16

  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. Vous vouloir les personnes enregistrées à / aux :
  6. <?
  7. $bdd = $_POST['bdd'];
  8. $select2 = $_POST['select2'];
  9. if($bdd=="")
  10. {
  11. ?>
  12. <form name="form1" method="post" action="abo_pros.php">
  13. <select name="bdd" id="choix">
  14.  
  15. <option name="abonnements">abonnements</option>
  16. <option name="la prospection">la prospection</option>
  17. </select>
  18.  
  19. <input type="submit" name="validation" value="valider" >
  20. </form>
  21. <?
  22. }
  23. elseif($select2=="" && $bdd=="abonnements")
  24. {
  25. ?>
  26. <!-- Si tu veux reafficher le premier select avec la valeur selectionnée-->
  27. <form name="form1" method="post" action="abo_pros.php">
  28. <select name="bdd" id="bdd">
  29.  
  30. <option name="abonnements" <? if($bdd=="abonnements")echo "selected";?>>abonnements</option>
  31. <option name="la prospection" <? if($bdd=="la prospection")echo "selected";?>>la prospection</option>
  32. </select>
  33. <!-- 2eme select -->
  34. <input type="submit" name="validation" value="valider" >
  35. </form>
  36. <form name="form2" method="post" action="abo_pros.php">
  37. <select name="select2" id="select2">
  38.  
  39. <option name="1">option 1</option>
  40. <option name="2">option 2</option>
  41. </select>
  42.  
  43. <input type="submit" name="valider2" value="valider" >
  44. </form>
  45.  
  46. <?
  47. }
  48. elseif($select2=="" && $bdd=="la prospection")
  49. {
  50. ?>
  51. <!-- Si tu veux reafficher le premier select avec la valeur selectionnée-->
  52. <form name="form1" method="post" action="abo_pros.php">
  53. <select name="bdd" id="bdd">
  54.  
  55. <option name="abonnements" <? if($bdd=="abonnements")echo "selected";?>>abonnements</option>
  56. <option name="la prospection" <? if($bdd=="la prospection")echo "selected";?>>la prospection</option>
  57. </select>
  58. <!-- 2eme select -->
  59. <input type="submit" name="validation" value="valider" >
  60. </form>
  61. <form name="form2" method="post" action="abo_pros.php">
  62. <select name="select2" id="select2">
  63.  
  64. <option name="1">option 1</option>
  65. <option name="2">option 2</option>
  66. </select>
  67.  
  68. <input type="submit" name="valider2" value="valider" >
  69. </form>
  70.  
  71. <?
  72. }
  73. ?>
  74. </body>
  75. </html>
26 Juillet 2006 14:43:41

Supprime cette déclaration de la variable $select2, elle ne sert a rien ici et c'est ca qui te fait cette erreur.
26 Juillet 2006 14:46:36

c'est tout simplementparce que tu as "casser" le if.

Apres avoir fermer le if tu dois tout de suite mettre le elseif et pas autre chose (ici $select2 = $_POST['select2'];)

Deplace le, mets le ou ce truc est utile
26 Juillet 2006 14:52:21

j'ai déplacé la déclarration comme à proposé imer.
Je l'ai supprimé pour voir ce que cela ferait.
Résultat la page ne marchait pas.
Du coup j'ai mis la déclaration de $select2 juste apres la déclaration $bdd (voir mon code que j'ai édité).
Maintenant ma page s'affiche mais j'ai toujours une erreur qui me dit : Undifined index: select2 in le chemin....
à la ligne où j'ai déclaré la variable $selecet2...que veut dire cette erreur et comment la supprimer?
26 Juillet 2006 15:40:05

Essaye avec cette ligne à la place de la tienne

if(!isset($_POST['select2'])
{
$select2="";
}

Mais je ne comprends pas pourquoi tu as besoin de déclarer cette variable :-?
26 Juillet 2006 15:56:13

:crying: :crying: :crying: :crying: :crying: :crying: :crying: :crying: :crying: :crying: :crying: :crying: :crying: :crying:
(Pleure de joie)
Ca marche!!!!!!!
merci à tous pour votre aide!
Je vous dis à toute à l'heure ou à demain pour un nouveau topic qui va vous occuper votre fin d'apres midi ou votre journée...
;-) ;-) ;-)
26 Juillet 2006 16:09:01

Tant mieux alors si ca fonctionne :-D

Oublie pas de mettre [RESOLU] ;-)
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