Page 1 sur 2
liste déroulante dynamique
Posté : 23 févr. 2005, 11:50
par david
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!
Posté : 23 févr. 2005, 11:52
par Cyrano
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.
liste dér dynamique
Posté : 23 févr. 2005, 12:06
par david
c'est pas possible de faire ça avec uniquement du php et du html?
Posté : 23 févr. 2005, 12:20
par Cyrano
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
liste dér dynamique
Posté : 23 févr. 2005, 12:24
par david
Ta réponse a été très complète, j'ai suffisamment d'infos pour arriver à mon objectif. merci!
Posté : 23 févr. 2005, 12:36
par Cyrano
pas de quoi
Posté : 20 juin 2009, 00:37
par lacfab
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
Posté : 20 juin 2009, 07:17
par animithra
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
Posté : 20 juin 2009, 11:30
par lacfab
Je te remercie pour ta réponse qui m'a fait avancer.
edit : voir messages suivants
Posté : 20 juin 2009, 11:33
par lacfab
Edit : à supprimer (doublon)
Posté : 20 juin 2009, 12:00
par lacfab
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 !
Posté : 20 juin 2009, 15:25
par Nagol
han ste nécrologie
Posté : 20 juin 2009, 15:26
par micetf
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
Posté : 20 juin 2009, 22:36
par lacfab
Waou ... y aurait pas un poil plus simple ? car je connais pas ajax du tout ...
Posté : 20 juin 2009, 22:51
par Cyrano
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