Javascript : Lier plusieurs listes déroulantes

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Javascript : Lier plusieurs listes déroulantes

par Hermès » 25 avr. 2006, 14:07

ha zut, je pensais que c'était possible...
Et avec visibility:collapse ?

par zeus » 25 avr. 2006, 13:52

Pour le moment je ne vais pas pouvoir tester la solution en AJAX car je suis toujours sur PHP4, par contre je vais regarder pour utiliser display:none.
:shock: Ajax fonctionne pour toutes les versions de PHP ;)
Par contre en test, si je fais

Code : Tout sélectionner

<select name="test"> <option value="1">1</option> <option value="2" style="display:none;">2</option> <option value="3">3</option> <option value="4">4</option> </select>
L'option 2 s'affiche toujours. Ce n'est pas la bonne syntaxe ?
Ce n'est pas possible de faire disparaitre des options de cette manière.

Il faut, en javascript, que tu supprimes la ligne de ta balise <select>

par bolbo » 25 avr. 2006, 13:20

Pour le moment je ne vais pas pouvoir tester la solution en AJAX car je suis toujours sur PHP4, par contre je vais regarder pour utiliser display:none.

Par contre en test, si je fais

Code : Tout sélectionner

<select name="test"> <option value="1">1</option> <option value="2" style="display:none;">2</option> <option value="3">3</option> <option value="4">4</option> </select>
L'option 2 s'affiche toujours. Ce n'est pas la bonne syntaxe ?

Merci d'avance,

Bolbo

par Hermès » 25 avr. 2006, 12:58

Une solution possible :
tu fais en sorte que le onchange de ta première liste exécute une fonction (javascript) qui change le style de l'option choisie dans la seconde liste pour lui mettre un display:none.

Autrement dit, quand tu choisi "option 3" dans la liste 1, ça appelle une fonction qui va mettre display:none à l'option "option 3" dans les listes 2 et 3.

par zeus » 25 avr. 2006, 12:57

Je pense que tu peut te baser sur ce tuto
http://www.phpfrance.com/forums/voir_sujet-9551.php

Il faudra l'adapter à tes besoins mais tu devrais arriver à faire ce que tu veux

Javascript : Lier plusieurs listes déroulantes

par bolbo » 25 avr. 2006, 12:54

Bonjour,

J'ai une question en javascript, concernant l'utilisation des listes déroulantes.
J'ai un ensemble de champs dans ma base de données, et je voudrais associer à chaque champ une valeur, unique, sélectionnée dans une liste.

Exemple :
Liste des champs :
* champ 1
* champ 2
* champ 3
* champ 4

Je veux que ces champs prennent une valeur parmi {1, 2, 3, 4, 5}, avec aucune répétition possible.

Etat d'origine :
Champ 1 ==> choix parmi {1, 2, 3, 4, 5} , le choix 1 est "selected"
Champ 2 ==> choix parmi {1, 2, 3, 4, 5} , le choix 1 est "selected"
Champ 3 ==> choix parmi {1, 2, 3, 4, 5} , le choix 1 est "selected"

Je choisis dans ma liste que champ 1 correspond à 3
Champ 1 ==> La liste contient {1, 2, 3, 4, 5}, c'est le 3 qui est "selected"
Champ 2 ==> choix parmi {1, 2, 4, 5} , le choix 1 est "selected", 3 a disparu
Champ 3 ==> choix parmi {1, 2, 4, 5} , le choix 1 est "selected", 3 a disparu


Je choisis dans ma liste que champ 3 correspond à 5
Champ 1 ==> La liste contient {1, 2, 3, 4}, c'est le 3 qui est "selected", 5 a disparu
Champ 2 ==> choix parmi {1, 2, 4} , le choix 1 est "selected", 3 et 5 ont disparu
Champ 3 ==> La liste contient {1, 2, 4, 5} , le choix 5 est "selected", 3 est toujours non affiché

Pour résumer, si je sélectionne un champ toutes les listes sont mises à jour.

J'avais fait l'équivalent en PHP, avec onChange="this.form.submit", ca marchait mais il fallait recharger à chaque fois la page, ca allait pour une ou deux listes mais ca devenait vite fastidieux s'il y avait un nombre important de listes.

Merci d'avance,

Bolbo