liste déroulante dynamique

23 févr. 2005, 11:50

Bonjour à tous!
Je souhaite savoir comment créer une liste déroulante dynamique avec la balise html
<select>
<option>Valeur1</option> //oriente automatiquement vers formulaire 1
<option>Valeur2</option> //oriente automatiquement vers formulaire 2
</select>

-Si l'utilisateur sélectionne la valeur 1, le formulaire 1 s'affiche
-Si l'utilisateur sélectionne la valeur 2, le formulaire 2 s'affiche

Tout cela sans avoir besoin d'un bouton valider.

Merci pour vos réponses!

23 févr. 2005, 11:52

Avec du Javascript, tu peux utiliser un gestionnaire d'èvénement onChange et faire modifier une propriété CSS "display" du formulaire concerné en fonction de la valeur choisie dans la liste déroulante.

23 févr. 2005, 12:06

c'est pas possible de faire ça avec uniquement du php et du html?

23 févr. 2005, 12:20

Le PHP est un langage serveur, donc ne réagira pas au moment de la sélection d'un élément de ta liste déroulante: quant au html, c'est un langage de mise en forme et il ne réagit pas aux évènements, il se contente d'afficher un contenu.
Tu dois donc passer par un langage client évènementiel, en l'occurence la JavaScript, quoique tu pourrais le développer en Java, mais c'est un brin plus complexe. Ce que tu peux donc faire, c'est utiliser une combinaison avec JavaScript et CSS: tu crées plusieurs formulaires en fonction des choix possibles et tu ajoutes un attribut CSS "display" à chacun sans oublier un attribut "name" et/ou "id" . Au changement, une petite fonction javascript pourra alors détecter la valeur choisie et selon un paramètre que tu auras défini, la fonction changera la propriété "display" du formulaire approprié de "none" à la valeur qui sera la plus appropriée à ta mise en page. Voir manuel CSS et également CECI

23 févr. 2005, 12:24

Ta réponse a été très complète, j'ai suffisamment d'infos pour arriver à mon objectif. merci!

23 févr. 2005, 12:36

pas de quoi

20 juin 2009, 00:37

Moi décidément je n'arriverai à rien avec javascript LOOOL
(je déterre ce post pour pas en créer un autre inutilement ...)

Voici mon code ... quelqu'un peut m'expliquer ce qui cloche ?

<html>
<head>
<title>TEST FORMULAIRE DYNAMIQUE</title>
<script type="text/javascript">
select_france(pays) {
if (radio_button.checked) {
   document.getElementById("AAA").style.display="none";
}
else {
   document.getElementById("AAA").style.display="";
}
select_other(pays) {
if (radio_button.checked) {
   document.getElementById("BBB").style.display="none";
}
else {
   document.getElementById("BBB").style.display="";
}
</script>
</head>

<body>
<form method='post' name='ajouter' action='' ENCTYPE='multipart/form-data'>
<input type="radio" name='pays' onclick="select_france();" /> France<br />
<input type="radio" name='pays' onclick="select_other();" /> Étranger

<br /><br />
<select name='AAA' size=1 style="display:none;">
  <option> Choisir un département</option>
  <option value='1'> Alsace</option>
  <option value='2'> Aquitaine</option>
  <option value='3'> Auvergne</option>
</select>
<select name='BBB' size=1 style="display:none;">
  <option> Choisir un pays</option>
  <option value='1'> Belgique</option>
  <option value='2'> Autriche</option>
  <option value='3'> Suisse</option>
</select>
                   


</form>

</body>
</html>

Merci

20 juin 2009, 07:17

Bonjour,

Code : Tout sélectionner

select_france(pays) {
  if (radio_button.checked) {
     document.getElementById("AAA").style.display="none";
  }
  else {
     document.getElementById("AAA").style.display="";
  }
//manque une accolade
select_other(pays) {
  if (radio_button.checked) {
     document.getElementById("BBB").style.display="none";
  }
  else {
     document.getElementById("BBB").style.display="";
  }
//manque une accolade
</script>

Trois petites erreurs :

1°) Au début de ta fonction javascript tu as tout bonnement oublié d'indiquer function...
le script ne comprendra pas ce que tu cherches à appeler.
2°) Dans ton appel il n'y a pas de paramètre pourtant il y en a un dans la description de ta fonction ? (pays)
3°) Il et manque des accolades (fait attention à bien indenter ça se verra plus vite comme ça)

Bonne continuation

20 juin 2009, 11:30

Je te remercie pour ta réponse qui m'a fait avancer.

edit : voir messages suivants

20 juin 2009, 11:33

Edit : à supprimer (doublon)

20 juin 2009, 12:00

Bon ça n'a pas été long pour que j'ai des soucis

Voici mon code à l'heure actuelle :

<html>
<head>
<title>TEST FORMULAIRE DYNAMIQUE</title>
<script type="text/javascript">
function select_france(departement) {
    if (departement.checked) {
        document.getElementById("ledepartement").style.display="none";
		document.getElementById("lepays").style.display="";
    }
    else {
        document.getElementById("ledepartement").style.display="";
		document.getElementById("lepays").style.display="none";
    }
}
function select_other(pays) {
    if (pays.checked) {
        document.getElementById("lepays").style.display="none";
		document.getElementById("ledepartement").style.display="";
		document.getElementById("laville").style.display="";
    }
    else {
        document.getElementById("lepays").style.display="";
		document.getElementById("ledepartement").style.display="none";
		document.getElementById("laville").style.display="none";
    }
}

function select_dept(ville,numdept) {
    if (ville.checked) {
        document.getElementById("laville").style.display="none";
    }
    else {
        document.getElementById("laville").style.display="";
    }
}
</script>
</head>

<body>
<form method='post' name='ajouter' action='' ENCTYPE='multipart/form-data'>
<input type="radio" name='choosepays' onClick="select_france(ledepartement);" /> France <input type="radio" name='choosepays' onClick="select_other(lepays);" /> Étranger
<br /><br />


<select id='ledepartement' name='departement' size=1 style="display:none;">
  <option> Choisir un département</option>  
  <option value='54' onClick="select_dept(laville,54);" > Meurthe et Moselle</option>
  <option value='57' onClick="select_dept(laville,57);" > Moselle</option>
  <option value='88' onClick="select_dept(laville,88);" > Vosges</option>
</select>
<select id='lepays' name='pays' size=1 style="display:none;">
  <option> Choisir un pays</option>
  <option value='1'> Belgique</option>
  <option value='2'> Autriche</option>
  <option value='3'> Suisse</option>
</select>
<br /><br />

<select id='laville' name='ville' size=1 style="display:none;">
  <option> Choisir une commune</option>
  <option value='1'> Lebled</option>
  <option value='2'> Superville</option>
  <option value='3'> Genial town</option>
</select>                   


</form>

</body>
</html>

Quand je choisis "France" je peux selectionner un département. Quand le sélectionne un département je voudrais que s'affiche une liste des communes se trouvant dans ce département. J'ai une liste de communes sur ma base de donnée avec le numéro de la ville et le numéro de département (exemple Nancy - 54, Metz - 57 ...) Je précise que le nom de la ville et le numéro de département sont dans deux champs séparés bien sur.
A l'instar de cette liste de ville, j'ai une liste de pays également

Donc comment je fais pour que mes listes ne se chargent que quand je clique sur la bonne option ? pas facile ça !

20 juin 2009, 15:25

han ste nécrologie

20 juin 2009, 15:26

En remplaçant auteur par département et livre par commune,
peut-être que ceci,
http://siddh.developpez.com/articles/ajax/#LIV-A,
fera l'affaire ?
Fred

20 juin 2009, 22:36

Waou ... y aurait pas un poil plus simple ? car je connais pas ajax du tout ...

20 juin 2009, 22:51

Là, c'est plus «déterrer un sujet», c'est de l'archéologie

Bon, faut arrêter de se faire une montagne avec AJAX. Il faudrait faire preuve d'un tout petit minimum de logique, quel que soit le nombre de listes à lier.

On va laisser de coté l'objet XHR que, pour la circonstance je vais considérer comme évident. Ensuite il faut quoi ? définir pour chaque liste ce qu'elle doit présenter et déclencher lorsqu'on y sélectionne un élément. Partant de là, chaque liste a un élément onchange qui déclenche l'appel d'une fonction qui va utiliser l'objet XHR et appeler le script serveur approprié pour alimenter la liste suivante. Chacune de ces fonctions attendra un ou plusieurs paramètres, c'est à toi de définir ça. Mais tu dois dès le début définir comment définir le contenu de chacune des listes en partant de la dernière. Pour chaque liste, quels sont les paramètres dont tu as besoin pour effectuer la bonne requête.

Pars sur ce schéma basique et fais toi un croquis sommaire sur papier : tu vas réaliser qu'en fin de compte c'est beaucoup moins compliqué que ça en a l'air

liste déroulante dynamique

Qui est en ligne