Menu de sélection à listes déroulantes

Bonjour à tous,
Après avoir parcouru le net j'en ai eu un peu marre de chercher, je n'arrive pas à trouver quelque chose de compréhensible sur mon problème.
En fait, il est question de 2 listes déroulantes, la deuxième étant dépendante du choix fait sur la première, ces 2 listes allant chercher leurs "option" dans une base de données SQL.
Je voudrais donc que la liste 1 crée sa liste d'options à partir de la base (je ne sais pas faire) et qu'une fois le choix fait sur cette 1ère liste, la deuxième crée sa liste de sélection automatiquement.
J'ai bien trouvé quelque chose sur le net à partir d'un topic de ce forum ici mais je pense (et j'espère) qu'il y a plus simple, et moins lourd...
Et pour les diverses listes générées à partir de la base, là faut m'éclairer de A à Z.
Merci à vous!

Salut Just1,

Le plus simple pour réaliser cela, à mon avis, c'est d'écrire un script Php qui se connecte à la base et range tous les éléments des deux listes dans un tableau à deux dimensions. Ensuite, c'est le code Javascript qui "fabrique" les deux listes du côté du client. En gros, tout est récupéré côté serveur, et mis en ordre côté client.
Bien sûr, il est possible de nos jours de tout faire "en direct", mais ce n'est valable que si tes listes sont vraiment très longues... et beaucoup plus difficile à mettre en oeuvre.

J'espère que j'avais bien compris ton problème...

Dzana

Les deux méthodes proposées ont toutes deux leurs avantages et leurs inconvénients. A mon avis, l'une n'est pas plus facile ou plus difficile à mettre en place que l'autre.

Pour des petites listes d'environ 5 ou 6 options chacune (~20-30 combinaisons d'options différentes possibles au total), j'aurais tendance à conseiller les tableaux chargées en avance, il est inutile de tuer une mouche avec un tank et ça suffit largement.
Plus les listes deviennent conséquentes et les options complexes, plus j'aurais tendance à me tourner au contraire vers XMLHttpRequest.
L'idéal étant, dans l'extrême, de faire un mix des deux, c'est-à-dire combiner l'utilisation de xhr avec un système de cache chez le client pour ne pas charger dix fois les mêmes choses.

Voici un comparatifsimple entre ces deux méthodes, de façon à ce que tu fasses ton choix en connaissance de cause. Aucune technique n'est parfaite.
Maintenant tout dépend du but recherché et de tes contraintes...

xhr = XMLHttpRequest (tutoriel de toutjavascript)
tb = tableaux javascript (proposition du post ci-dessus)

xhr : Pas de chargement superflu à l'ouverture du document. Le contenu des sous-listes est appelé seulement si on en a besoin.
tb : Chargement de tout le contenu de toutes les sous-listes dès l'ouverture du document, ce qui peut ralentir considérablement cette ouverture si les listes sont longues

xhr : Dans la mesure où chaque nouvelle sélection dans la première liste nécéssite une reqête HTTP, l'interface peut sembler « gelée » pendant le chargement. Habituellement cet effet ne dure pas assez longtemps pour qu'il soit vraiment perceptible, mais si les listes sont longues et/ou le serveur est lent et/ou la connexion du client est lente, ce ralentissement peut se faire sentir.
tb : Toutes les données étant chargées dès le début, elles sont immédiatement disponibles et l'interface semble plus rapide.

xhr : Puisque seules les données sont demandées au moment nécessaire, la consommation de mémoire est minimale.
tb : Puisque toutes les données sont chargées dès le début, la consommation de mémoire peut augmenter en flèche dans le cas où les listes sont longues.

Just1 a écrit :

Je voudrais donc que la liste 1 crée sa liste d'options à partir de la base (je ne sais pas faire)

Une solution simple consiste à lancer une fonction php qui fait une requete vers ta base et qui génère les <option> pour alimenter ton <select>

Just1 a écrit :

et qu'une fois le choix fait sur cette 1ère liste, la deuxième crée sa liste de sélection automatiquement.

Tu peux faire une fonction javascript avec comme paramêtre déclenchant un onChange sur ton premier <select>, fonction qui ré-ouvre ta page actuelle avec des parametres supplémentaires dans l'URL qui permettront à ton ton 2è <select> de s'alimenter de la même manière que le premier.

C'est du php/sql classique, mais y'a un rechargement de page (quand tu changes ton premier <select>). Sinon faut passer de l'AJAX, mais je sais pas si tu connais.
Modifié par Ondskapt (16 Aug 2007 - 09:20)

Moi je serais plutôt pour la solution des tableaux chargés à l'avance puisqu'il s'agit d'une petite table avec peu de choix. Par contre je ne connais absolument pas la syntaxe pour mettre les éléments récupérés dans un tableau (sauf si on se base sur des fetch_row ou fetch_column). Pour créer la liste, ça doit aller, mais comment fait-on pour ne récupérer qu'une seule fois un élément qui se répète plusieurs fois?

Ondskapt a écrit :
Tu peux faire une fonction javascript avec comme paramêtre déclenchant un onChange sur ton premier <select>, fonction qui ré-ouvre ta page actuelle avec des parametres supplémentaires dans l'URL qui permettront à ton ton 2è <select> de s'alimenter de la même manière que le premier.

Malheureusement cette solution ne m'intéresse pas => rechargement de la page obligatoire. Je préfèrerais une fonction qui agit sur la deuxième liste à partir du "onChange" de la première, mais il faudrait qu'on me dise comment faire
En tout cas merci de vos réponses.

Si tu décides de rentrer tes résultats en dur dans le code de ta page, tu peux te débrouiller intégralement en javascript.
Pour rajouter des <option> à ton <select>, tu peux en javascript utiliser la fonction new Option().

Un truc du genre

nom_du_formulaire.nom_du_select[y] = new Option ('intitule','valeur')

la variable y devant être incrémentée en fonction du nombre d'insertion
Modifié par Ondskapt (17 Aug 2007 - 09:10)

OK je vais essayer ça, mais comment ne pas entrer 2 fois la même option si ma table la contient plusieurs fois?

C'est toi qui les rentre à la main dans ton code javascript, donc à toi de bien prévoir où ira quoi.

Salut,

Il me semble que Just1 disait qu'il allait chercher les options dans la base de données et non qu'il les rentrait à la main. On peut donc faire une requête Ajax et générer en retour des listes d'options qu'on conserve dans un tableau.
Si une option est susceptible d'apparaître plusieurs fois dans la table, il faut faire une requête SQL du type :

SELECT DISTINCT option FROM maTable

afin de ne récupérer que des options uniques.

koala64 a écrit :
Salut,
Si une option est susceptible d'apparaître plusieurs fois dans la table, il faut faire une requête SQL du type :

SELECT DISTINCT option FROM maTable

afin de ne récupérer que des options uniques.

Ca, ça ressemble à ce qu'il me fallait, merci !
En attendant je continue de coder ma page mais j'ai toujours un problème : un onChange sur ma première liste exécute une fonction associée (jusque là tout va bien), mais comme ma page est codée dans l'ordre fonction - liste1 - liste2, comment faire en sorte que ma fonction appelle l'affichage de ma deuxième liste, tout ça sans recharger la page? (oui, je sais, j'ai encore beaucoup à apprendre... ).

Bonjour,

Je penses que tu as intérêt à poster ce problème (modifier la deuxième liste sans rechargement) dans le forum qui parle de ça, à savoir DOM, JavaScript, ECMAScript.

Il faut que lorsqu'on sélectionne la deuxième liste une fonction javascript se charge de supprimer les options non valides (en supposant que tu as rempli totalement le deuxième select, puisque visiblement c'est la solution qui a été choisie).