Champs dynamiques : listes déroulantes liées

Version imprimable

12/12/2005, 12h10
Mr N.

Champs dynamiques : listes déroulantes liées

Salut les scripteurs !

J'entends déjà marmoner dans leur barbe les grincheux : "Question posée 10000 fois"... "utilise la fonction rechercher"... "regarde dans la faq"... "patati patata"...
Sachez que je vous ai devancé et que je sais lier des select entre elles. na. Là dessus aucun soucis.

En fait je suis à la recherche d'une bibliothèque permettant de gérer un ensemble de regles qui permettent de rendre certaines select box influantes sur d'autres. Et qui gère les select multiples par la même occasion du genre
S1(A) => S2(A,B,C)
S1(B) => S2(C,D,E)
Si je selectionne A, je me retrouve avec A,B,C dans S2, si je selectionne B, je me retrouve avec C,D,E et si je selectionne A+B je me retrouve avec A,B,C,D,E
....

Et aussi les règles en cascade si possible. Par exemple, si à la suite d'application de regles je me retrouve avec une seule valeur dans ma select box, appliquer les regles pour cette select box afin de modifier les autres qui en dépendent...

Dernière option qu'elle serait la bienvenue : dépendances multiples S1(A) + S3(C) => S2(D,E)

Voilà, j'ai un peu l'impression de demander la lune. :roll:
Si vous avez un framework js qui fait ça ou une appli open source basée sur un systeme équivalent, je suis preneur :ccool:

Merci d'avance,
Mr N.

PS: pas besoin de xmlhttprequest, tout doit se passer côté client

Exemple :
http://www.mattkruse.com/javascript/dynamicoptionlist/
12/12/2005, 13h19
siddh

salut,
alors comme ça tu sais rechercher dans la faq ? :p

Je ne sais pas si tu arrivera a trouver ca tout fais.
Malheureusement je n'ai pas ca sous la main.

Ca risque d'être lourd coté client par contre.
Enfin lourd, je m'entend, eternel discussion sur xmlhttp, est ce plus rentable de faire plusieurs petits appels serveurs que d'avoir une grosse source ...

Si dans ton cas, tu sais a l avance toutes les combinaisons possibles, tu peux effectivement faire du coté client a 100%.
Par contre tu vas avoir un code javascript assez conséquent, ne serais ce que les données qui vont alimenter tes selects.

L'avantage pour toi a utiliser xmlhttp serais peut etre que tu pourrais gérer tout le calcul sur le serveur et l'encapsuler dans des objets si ca te facilite la vie.
Bon tu me diras en js aussi tu peux te faire des objets mais tu as peut etre plus de facilité en php qu'en js ?
Tu pourrais aussi stocker tes contraintes dans des fichiers xml (bopn ca se trouve t'en a pas besoin du tout).

Je sais que tout ce long discours t'avance certainement pas, si tu te lances dans le dev de ce truc, on te filera un coup de main ;)
12/12/2005, 13h41
Mr N.

Le monsieur il a dit pas d'xmlhttp :P
Je doute de toutes facons que ca me serait utile de commencer dans cette voie, car à partir du moment ou je sais le faire en php, je sais le faire en js ^^

Le développer ne me pose pas de problème (enfin si, je perds un peu de cheveux mais ca fait parti du métier) je veux seulement être sur de ne pas réinventer la roue sachant qu'il existe un truc de la mort-qui-tue-la-vie qui feeds my needs.
Visiblement je ne suis pas le seul à m'interesser à ce genre de truc, vu la proposition de mattkruse.com (cf premier post)
12/12/2005, 13h47
siddh

Et tu peux pas te servir de son truc ?
12/12/2005, 13h55
Mr N.
j'arrive pas à le tester, je comprends pas :oops:

A première vue je trouve la gestion des regles un peu pourrites : on ajoute des dépendances :
Code:

1 2 dol.addDependentFields("Field1","Child1","Child2"); dol.addDependentFields("Field2","Child3","Child4");
mais apres pour les options qui débouchent sur d'autres options ca donne :

Code:

dol.forValue("Value1").addOptions("Suboption1","Suboption2","Suboption3");

Or je sais pas ce qui se passe si Value1 fait partie de field1, field2 ou des deux :koi:
Et puis ces suboptions, elles sont rajouté à quel champs ? Child1 ? Child2 ?...
Bref c'est un peu zarb et brouillon pour moi.
12/12/2005, 13h58
SpaceFrog

Citation:

un peu pourrites

et une bibliothèque de français ? :P :roll: :wink:
12/12/2005, 13h59
siddh

euh hors sujet mais ca va t 'aider pour un autre de tes posts, je viens de tomber sur ca, visiblement, c est ce que tu utilisais l'autre jour ;)
Un ti coup de doc t'aidera peut etre :D

Pour ton truc, je regarde et essayes de le faire marcher ;)

tu devrais regarder directement avec le lien show source qui se trouve au dessus des selects, il te met l'exemple avec les selects en question.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var makeModel = new DynamicOptionList("MAKE","MODEL","TYPE");
makeModel.addDependentFields("MAKE2","MODEL2","TYPE2");
 
makeModel.forValue("Ford").addOptions("Fiesta","Focus","Taurus"); // Add options if VALUE of option is selected
makeModel.forText("Honda").addOptions("Civic","Accord","Prelude"); // Add these options if TEXT of option is selected
 
makeModel.forValue("Ford").setDefaultOptions("Fiesta");
makeModel.forText("Honda").setDefaultOptions("Accord");
makeModel.forValue("Ford").forValue("Taurus").addOptions("2-door","4-door");
 
makeModel.forField("MODEL").setValues("Focus","Taurus");
makeModel.forField("TYPE").setValues("2-door");
makeModel.forField("MODEL2").setValues("Civic","Prelude");
 
makeModel.forValue("Toyota").addOptionsTextValue("Camry","10-CAMRY","Corolla","20-COROLLA","Celica","30-CELICA"); // Add options with values different from text

C'est plus facile a comprendre ;)

12/12/2005, 14h06
Mr N.

C'est bon, prototype c'est de l'histoire ancienne :lol: je le maitrise presque.

On voit tout de suite que la Grenouille est moins bien inspirée que pour l'histoire de ma fonction $(...) :P
12/12/2005, 14h11
SpaceFrog

j'aime pas les librairies... :evil:
ça fait toujours ajouter des usines à gaz ...

ou alors c'est des librairies persos dont je connais par coeur toutes les focntions ...

Citation:

Envoyé par siddh

tu devrais regarder directement avec le lien show source qui se trouve au dessus des selects, il te met l'exemple avec les selects en question.

Déjà fait.
Citation:
Envoyé par siddh
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var makeModel = new DynamicOptionList("MAKE","MODEL","TYPE"); makeModel.addDependentFields("MAKE2","MODEL2","TYPE2"); makeModel.forValue("Ford").addOptions("Fiesta","Focus","Taurus"); // Add options if VALUE of option is selected makeModel.forText("Honda").addOptions("Civic","Accord","Prelude"); // Add these options if TEXT of option is selected makeModel.forValue("Ford").setDefaultOptions("Fiesta"); makeModel.forText("Honda").setDefaultOptions("Accord"); makeModel.forValue("Ford").forValue("Taurus").addOptions("2-door","4-door"); makeModel.forField("MODEL").setValues("Focus","Taurus"); makeModel.forField("TYPE").setValues("2-door"); makeModel.forField("MODEL2").setValues("Civic","Prelude"); makeModel.forValue("Toyota").addOptionsTextValue("Camry","10-CAMRY","Corolla","20-COROLLA","Celica","30-CELICA"); // Add options with values different from text
C'est plus facile a comprendre ;)
Ben c'est vite dit !

Prenons cette ligne :

Code:

makeModel.forValue("Ford")............

"Ford" fait partie de quel select ? MAKE ? MAKE2 ?
Visiblement les deux. Et si je veux pas ? Je peux tres bien avoir deux select box qui n'ont rien à voir avec des _value_ identiques...
Code:

1 2 3 4 5 6 7 <select name="s1"> <option value="v1">HAAAA</option> </select> <select name="s2"> <option value="v1">HOOOO</option> </select>

12/12/2005, 14h18
siddh

oui mais lui il a tout mis dans le meme DynamicOptionList pour les gérer ensemble.

Il suffit que t'en instancie deux et pi vala ;)

Ou alors, t'aura un enchaiment de forValue avec deux valeurs identiques.

Soit. voici un exemple de code. j'aimerais que quand s1 = v3, (none, v4, v5, v6) soient proposé pour s3. Comment tu fais avec son truc ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
    <head>
        <script src="DynamicOptionList.js" type="text/javascript"></script>
    </head>
    <body>
        <fieldset>
            <legend>Champs dynamiques</legend>
            <select id="s1" size="4">
                <option value="100">None</option>
                <option value="v1">PA</option>
 
                <option value="v2" selected="selected">PB</option>
                <option value="v3">PC</option>
            </select>
            <select id="s2">
                <option value="100">None</option>
                <option value="v1" selected="selected">Q1</option>
                <option value="v2">Q2</option>
 
                <option value="v3">Q3</option>
            </select>
            <select id="s3" size="7">
                <option value="100">None</option>
                <option value="v1">TA</option>
                <option value="v2">TB</option>
                <option value="v3" selected="selected">TC</option>
 
                <option value="v4">TD</option>
                <option value="v5">TE</option>
                <option value="v6">TF</option>
            </select>
        </fieldset>
        <script type="text/javascript">
        var dol = new DynamicOptionList();
        dol.addDependentFields("s1","s3");
        dol.forValue("v1").addOptions("v4"); //????????
        </script>
    </body>
 
</html>

12/12/2005, 15h06
siddh

mwarf meme son code a lui j arrive pas a le faire marcher et j'ai pas d'erreur qui remonte 8O
12/12/2005, 15h15
Mr N.

Merci de confirmer siddh que son code il est pourrite :mrgreen:
Allez zou, à la poubelle ! Au suivant ! d'autres propositions ? même si vous n'aimez pas les librairies ;)