Parse et remplissage de tableaux dynamiques

**Beginner.** · 09/11/2018, 18h17

Ah oui bien vu !!! +1

En fait je découvre ça !!! Ah bah dans ce cas c'est plus facile et on va en revenir à ce que je disais sur comment récupérer toutes les options sélectionnées, là on ne peut pas utiliser la solution dont parlait Claude ici #57 avec selectedIndex (à moins que je me trompe, dites-le moi si c'est possible) mais il va falloir utiliser ce dont je parlais (selectedOptions) eici #60 entre autres...

Invité · 09/11/2018, 18h29

De toutes les façons : il faut utiliser des checkbox !

C'est OBJECTIVEMENT plus simple à mettre en oeuvre.

**CosmoKnacki** · 09/11/2018, 23h13

Une chose reste floue: est-ce que lorsqu'un produit appartient à une sous-catégorie, il appartient aussi à la catégorie mère? Dans ce cas, il n'est plus légitime de pouvoir continuer à cocher la catégorie mère lorsqu'une catégorie enfant est déjà cochée. Lorsqu'une sous-catégorie est cochée pour un produit, les catégories mères ne sont-elles pas censées y être associées de fait? Ne devraient-elles pas être cochées automatiquement?

**claude.aignant** · 09/11/2018, 23h26

Bonsoir,

J'ai trouvé un court moment pour me connecter, et prendre rapidement connaissance de vos échanges.

@jreaux62: en fait tu as totalement raison, maintenant que le dev des checkbox existe (ce qui n'était pas le cas lorsque j'ai débuté le projet), je reconnais qu'il serait dommage de ne pas profiter de ce dev (un peu adapté, car en fait çà fonctionne actuellement pas tout à fait comme souhaité*), pour y ranger mes tableaux actuels, gérés proprement par des checkbox, dans des listes bien propres bien ordonnées et bien plus lisibles (voire plus pratiques à faire évoluer...).
Je suis juste dégoûté pour tout le temps et l'énergie dépensés à faire bien fonctionner mon dev perso, qui gérait effectivement 'correctement' les selections/désélections multiples.
Et j'ai un peu peur (non, beaucoup peur) de devoir me reposer 100% sur un code que je ne maîtrise pas totalement (et donc que j'aurai du mal à adapter/faire évoluer au besoin)....

Mais le résultat n'en sera que meilleur sans aucun doute.

Bon clairement, je vais pas bosser dessus ce soir (ni demain), je pense, mais cette réponse, c'est une forme d'engagement

*pas tout à fait : en effet, il me faut préfixer les catégories/sous-catégories/sous-sous-catégories (sélectionnées) d'un terme 'global' (repris pour toute catégorie ou sous-catégorie ou sous-sous-catégorie), permettant de 'présenter' le filtrage par sous-catégorie ou sous-sous-catégorie, quelle qu'elle soit (l'index 0 de mes select)...

Par exemple, en caractéristiques du produit (d'autres attributs sont prévus : par occasion, par délai de livraison, etc...) , j'ai un en l'état un filtrage possible par 'Destinataire', 'Couleur', 'Matière'...
Et pour chacun d'eux, un filtrage possible sur le site selon les différentes valeurs de mes tableaux JS...
Soit.
Et bien pour les catégories, sous-categ, et sous-sous-categ, lorsqu'elles se retrouvent elles aussi dans la liste de tags d'un produit, il va falloir que je pense pour le présent dev à 3 termes qui permettent de les 'présenter' (ce que j'affiche en index 0) :
En gros, quand on arrive sur 1 liste de résultats, quelle qu'elle soit, çà permettrait un filtrage par appartenance possible de produits à des (sous ou sous-sous) catégories transverses : 'Voir toutes les :' pour niveau 1, puis 'Filtrer par :' pour niveau 1.1, puis 'Afficher :' pour niveau 1.1.1....... (on aurait donc par exemple 'Voir toutes les :_Catégorie 1','Filtrer par :_Sous-Catégorie 1.1','Afficher :_Sous-Sous-Catégorie 1.1.1')
.....en multipliant avec les divers tags de caractéristiques produit et autres les possibilités de filtrage, le tout sans surcharger la page de résultats ; tout un concept pour pallier à une solution ~~offrant~~ limitant à 3 niveaux de menu seulement et aucune solution de filtrage en natif..

**claude.aignant** · 09/11/2018, 23h34

Envoyé par CosmoKnacki

...est-ce que lorsqu'un produit appartient à une sous-catégorie, il appartient aussi à la catégorie mère?...

Réflexion très juste, MAIS je comptais le gérer manuellement.

Car c'est une opération faite 1 fois pour chaque produit ajouté à la boutique, et surtout un produit peut se trouver dans différentes sous-catégories n'appartenant pas aux mêmes catégories mères (çà deviendrait pénalisant qu'il leur soit automatiquement rattachées).....

**Beginner.** · 09/11/2018, 23h51

@CosmoKnacki

Oui tout-à-fait je m'étais dit la même chose !

**Beginner.** · 09/11/2018, 23h54

Salut,

Envoyé par jreaux62

Je cherche sur le web depuis tout-à-l'heure... sans succès.
Seules quelques rares attributs sont modifiables sur les options : font,... (?)

Alors histoire de s'instruire j'ai quand même voulu tester tout ça...

- D’après mes tests (sur FF et Chrome) on peut ajouter une class à une option et donc faire ce que j'avais imaginé...
- Dans cette class (selectionned) j'ai modifié la couleur, le font-style, le font-weight et le background-color (mais j'ai aussi essayé font-family et font-size et ça fonctionne aussi) ce qui montre qu'on peut personnaliser plusieurs choses quand même...
- On peut bien sûr modifier la class "selectionned" pour personnaliser le style comme on le souhaite.
- Il y a toujours le comportement par défaut (surbrillance en fond bleu) mais pour supprimer cette surbrillance par défaut eh bien je désélectionne à chaque fois l'option sélectionnée...
- J'affiche toutes les options de tous les selects dans une textarea.
- De cette manière on n'a pas plusieurs fois la même option dans la textarea.
- Plus besoin de faire "CTRL"+"clic" pour sélectionner/désélectionner une option à la fois, un simple clic suffit.
- On peut utiliser autant de select qu'on veut, il n'y a qu'une seule fonction pour tous les select.
- En plus cette fonction est très courte.

Voici pour tester : https://jsbin.com/fozomafebi/edit?html,output

Voici le code (pour cet exemple j'ai utilisé 3 select mais on peut en ajouter autant qu'on veut...) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
 
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Custom Select</title>
    <style>
      .selectionned {
        color: green;
        font-style: italic;
        font-weight: bold;
        background-color: beige;
 
      }
    </style>
  </head>
 
  <body>
 
    <select onchange="choix(event);" size="17" aria-placeholder="ddd" placeholder="Choisissez">
      <option>-- Choisissez une valeur ---</option>
      <option value="Autre couleur ou nuance">Autre couleur ou nuance</option>
      <option value="Couleurs claires">Couleurs claires</option>
      <option value="Couleurs foncées">Couleurs foncées</option>
      <option value=" Argent">Argent</option>
      <option value="Bleu">Bleu</option>
      <option value="Blanc">Blanc</option>
      <option value="Gris">Gris</option>
      <option value="Jaune">Jaune</option>
      <option value="Marron">Marron</option>
      <option value="Noir">Noir</option>
      <option value="Orange">Orange</option>
      <option value="Rose">Rose</option>
      <option value="Rouge">Rouge</option>
      <option value="Transparent">Transparent</option>
      <option value="Vert">Vert</option>
      <option value="Violet">Violet</option>
    </select>
 
 
    <select onchange="choix(event);" size="19">
      <option>-- Choisissez une valeur ---</option>
      <option value="Autre">Autre</option>
      <option value="Acier">Acier</option>
      <option value="Acier Inoxydable">Acier Inoxydable</option>
      <option value="Alliage">Alliage</option>
      <option value="Aluminium">Aluminium</option>
      <option value="Argent">Argent</option>
      <option value="Argent 925">Argent 925</option>
      <option value="Carbure de tungstène">Carbure de tungstène</option>
      <option value="Métal">Métal</option>
      <option value="Or">Or</option>
      <option value="Or 18K">Or 18K</option>
      <option value="Or Blanc">Or Blanc</option>
      <option value="Or Jaune 18K">Or Jaune 18K</option>
      <option value="Or Rose">Or Rose</option>
      <option value="Palladium">Palladium</option>
      <option value="Plaqué Rhodium">Plaqué Rhodium</option>
      <option value="Platine">Platine</option>
      <option value="Titane">Titane</option>
    </select>
 
    <select onchange="choix(event);" size="6">
      <option>-- Choisissez une valeur ---</option>
      <option value="Articles A1">Articles A1</option>
      <option value="Articles A2">Articles A2</option>
      <option value="Articles A3">Articles A3</option>
      <option value="Articles A4">Articles A4</option>
      <option value="Autres">Autres</option>
    </select>
    <br>
    <textarea name="" id="myTextarea" cols="30" rows="30"></textarea>
 
 
    <script>
      function choix(event) {
        var select = event.target; // "select" désigne le menu déroulant sur lequel il y a un chagement... 
        if (select.selectedIndex === 0) return; // si c'est la première option qui est sélectionnée on ne fait rien...       
 
        var option_selectionnee = select.selectedOptions[0] // ou : select.options[select.selectedIndex]    
        option_selectionnee.selected = false; // déselectionne l'option sélectionnée pour suppriimer la surbrillance par défaut...   
 
        // Si l'option n'est pas selectionnée (c'est-à-dire si elle n'a pas la class "selectionned") 
        // alors on l'a sélectionne (c'est-à-dire on lui ajoute la class "selectionned")
        // Si l'option est déjà selectionnée (c'est-à-dire si elle a la class "selectionned") 
        // alors on l'a desélectionne (c'est-à-dire on suprime la class "selectionned")
        option_selectionnee.classList.toggle("selectionned");
 
        // La suite ajoute bêtement à la textarea toutes les options sélectionnées de tous les selects...
        var str = "";
        document.querySelectorAll(".selectionned").forEach(element => {
          str += element.textContent + ",\n";
        });
        document.getElementById("myTextarea").value = str;
      }
    </script>
  </body>
 
</html>

C'est juste un exemple pour montrer ce qu'on peut faire mais on peut évidement l'adapter pour des besoins spécifiques...

Il peut remplacer une partie du code de claude.aignant pour rendre ce dernier fonctionnel et plus concis...
A moins que finalement il passe aux checkboxs...

**Beginner.** · 10/11/2018, 00h39

Ah bah pour le fun j'ai ajouté du CSS au survol d'une option par la souris : https://jsbin.com/retuhuqesi/1/edit?html,output

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
option:hover {            
        background-color: bisque;
        color: blue;
        border: 1px solid blue ;            
        margin-left: 5px;
      }

On voit qu'on styler plusieurs choses...

Invité · 10/11/2018, 07h50

Bon.

Ça commence vraiment à devenir la Foire a la Saucisse... *
* Et je ne dis pas ça a cause de CosmoKnacki !

claude.aignant est déjà suffisamment dans la confusion pour ne pas en rajouter.

Il a été démontré qu'utiliser des select mène à une usine à gaz
Avec les checkbox, on obtient le résultat voulu rapidement et simplement

DONC : il faut DÉCIDER une fois pour toute si on adopte les checkbox (ou pas).
Et s'y tenir.

Pour moi, le choix est fait.
(Si on parle encore de select ou d'option, ce sera sans moi)

**claude.aignant** · 10/11/2018, 08h38

@Beginner. :
Y'a pas à dire, c'est juste génial ! Dire que je fais presque la même chose en moins bien et en 60 fois plus de lignes, je le vis mal...
Mais adopter cette solution impliquerait de conserver un fonctionnement par select, ce qui, ma fierté mise de côté, me paraît de moins en moins judicieux.

@jreaux62 :
J'adore cet humour

Je valide définitivement l'idée des checkbox dans mon cas, c'est vraiment plus pratique à l'usage, à tous points de vue.

Et en terme d'affichage (ou récupération de ces différentes listes), pour ne pas surcharger la page (display et source), conserver mon système hidden/visible, et idéalement faire appel à des fichiers de listes (stockés dans le même répertoire en local) via un système d'include...
Voire pouvoir les mettre à jour et sauver les modifs (çà restera un traitement/exploitation en local) ?! Bon je vais peut-être un peu loin pour le moment je pense, déjà traiter par listes <ul><li> ce serait top, même en les maj manuellement au besoin.

Du coup si je résume, il y aurait 2 traitements similaires mais légèrement différents pour le traitement des listes <ul><li> via checkbox:

l'une pour les diverses 'caractéristiques' des produits (X caractéristiques, soit X listes? Car les listes sont différentes selon le type de produits), où on a pour chaque liste 'de caractéristiques', des (un groupement d') attributs liés (couleur, matière : mon préfixe de tag...), et ensuite diverses valeurs pour chacun de ces attributs (bleu, argent...) : le résultat en tag serait : 'Couleur_bleu', Matière_Argent', etc...)
l'autre pour pouvoir y ajouter les tags liés à l'arborescence (comme expliqué dans mon précédent post), avec en préfixes génériques : 'Voir toutes les :' pour (toutes les catégories de) niveau 1, puis 'Filtrer par :' pour (toutes les sous-catégories de) niveau 1.1, puis 'Afficher :' pour (toutes les sous-sous-catégories de) niveau 1.1.1....... (on aurait donc par exemple 'Voir toutes les :_Catégorie 1','Filtrer par :_Sous-Catégorie 1.1','Afficher :_Sous-Sous-Catégorie 1.1.1') [EDIT: et une gestion 'manuelle' (non automatique) de l'association d'une catégorie mère en cas de sélection de sous ou sous-sous catégorie]

J'ai essayé d'être clair, j'espère ne pas vous avoir perdu...

Quant à moi, je sais que je ne serai plus en mesure de me reconnecter d'ici la fin de journée

En tout cas travailler dessus qu'à partir de demain matin..

Invité · 10/11/2018, 08h46

Envoyé par claude.aignant

Je valide définitivement l'idée des checkbox dans mon cas, c'est vraiment plus pratique à l'usage, à tous points de vue.

OK.
On va pouvoir avancer dans UNE SEULE direction, au lieu de s'éparpiller...

J'ai donné un bon début de piste ici.

Même "manuellement", la liste sera très facile à modifier.

Quant au traitement JS, on a déjà fait le plus gros (avec le menu).
Quelques adaptations des fonctions devraient suffire.

Pour les "caractéristiques produits".
On peut les mettre dans plusieurs listes distinctes.
Ça va juste demander un peu de programmation en plus pour regrouper les "tags" à la fin.
A moins d'afficher les tags dans des textarea distincts (un par liste).

Bref : AVANT de coder, une petite réflexion s'impose.

**claude.aignant** · 11/11/2018, 11h55

Envoyé par jreaux62

Bref : AVANT de coder, une petite réflexion s'impose.

Bonjour tout le monde,

Bon, j'avais un bout de la matinée, et peut-être un peu cet AM, pour tenter d'avancer sur mon projet.

@jreaux62 : sur quels éléments selon toi, dois-je mener une réflexion avant de 'coder' (çà me fait déjà peur).

Je me lance dans la réflexion attendue (j'espère)...
Pour résumer on a dit :

modification manuelle des listes (on garde à l'esprit une évolution possible : maj dynamiquement les listes de 'caractéristiques' depuis l'outil), stockées en local dans le même répertoire, toutes 'chargées'/appelées par la page 'principale'.
adaptations des fonctions existantes (traitement via checkbox) pour permettre les 2 traitements tels que précisés plus haut
chaque type de caractéristiques (son nom - dans mon exemple 'Caractéristiques Produits', un autre serait 'Caractéristiques Divers'-), avec leur groupement d'attributs associés -actuellement le 1er select- et enfin leurs valeurs) dans 1 seule liste, et X listes possibles.
en terme d'affichage, un peu comme sur ma page, on fait apparaître/disparaître 2 div : l'une pour le menu, l'autre (ou X autres?) pour gérer les X différentes 'caractéristiques' (listes <ul><li>) créées.
la page 'principale', où sont stockés les JS permettant d'appeler ces divs, laisse apparaître, pour chaque caractéristique qui a été configurée (textarea de tags sélectionnés non vide), ou éléments de menu sélectionnés, une textarea dédiée et libellée du nom de la caractéristique concernée ou menu, sur la page 'principale'.
un traitement (quasi existant?) pour concaténer toutes les textarea non vides, visualiser le résultat et le copier dans le presse-papier.

Manque t'il des points de réflexion?

Je devance une question importante : pour 1 produit donné, il pourrait être concerné par des tags afférents à 2 listes distinctes (voire plus...) de caractéristiques.... Et selon les différentes listes de 'caractéristiques' produit, la saisie directe sur liste <ul><li> pourrait potentiellement permettre de saisir/sélectionner 2 attributs de filtrage à priori identiques, mais avec une liste de valeurs différentes (par exemple pour un article, couleur de l'article, couleur de l'impression...). On part du postulat que l'attribut 'Couleur' concerne la qualité intrinsèque du produit principal, les autres types de filtrage par couleur seront nommés/précisés différemment dans les listes. Donc théoriquement 'aucun attribut' au nom identique entre des listes différentes, limite qui serait plus simple a verrouiller lorsque tout sera fini et que j'essaierai de mettre en place un système de maj des listes depuis l'outil.

Pour la liste du menu, c'est déjà plus compliqué : en considérant que l'arborescence propose en catégories principales Produit personnalisés/Autres Produits (voire d'autres sections additionnelles), et une suite d'arborescence descendante (sous-catégories similaires voire identiques), j'ai un souci : lorsque les tags vont être générés pour les sous-catégories ou sous-sous-catégories, ils vont être identiques à d'autres générés depuis l'autre partie d'arborescence (pour l'exemple, je pense à un même produit qui peut être vendu personnalisé OU non personnalisé : potentiellement il se retrouve dans 2 voire plus sous-catégories ou sous-sous catégories différentes mais avec le même libellé : comment on fait dès lors pour les différencier -et pouvoir supprimer les bons, etc...- ?)
Ou alors du coup c'est l'organisation de l'arborescence qui pose problème, mais dès les catégories principales, j'aimerai faire la distinction et donner le choix de se ballader soit dans l'arborescence de produits personnalisables, soit dans l'autre pour produits non personnalisables...
Je pense que j'ai besoin de vos conseils avisés

...

Merci beaucoup,
Bon WE à vous

Invité · 11/11/2018, 13h11

Bonjour Claude.

Tu fais décidément beaucoup trop de vent avec ta bouche...
Tu noies littéralement tout sous un flots de paroles.
Tu ne fais pas une "réflexion" : tu fais une dissertation.

Tout ce que je demandais, c'est une "réflexion pratique et technique":

pour savoir dans quelle direction s'engager
pour éviter de coder inutilement

A- On a déjà un système qui fonctionne (menu -> liste avec checkbox -> des fonctions JS qui vont bien)

B- On veut l'adapter à d'autres listes :

que peut-on mettre en commun (fonctions,...) ?
que doit-on modifier/adapter dans le script qui fonctionne ?
comment structurer les données (listes de "caractéristiques produits") ?

J'ai donné un début de piste :

on écrit les listes de "caractéristiques produits" de la même façon que la structure du menu (liste <ul><li>, avec sous-niveaux, sous-niveaux)

Ainsi, on va pouvoir se servir des même fonctions, moyennant quelques adaptations

"réflexion" -> question : "quelles adaptations faudrait-il faire" ?
"réflexion" -> réponse : en ajoutant des paramètres aux fonctions, pour identifier :

quelle liste/menu prendre en compte
dans quel textarea inscrire les résultats

etc.

LA PREMIERE CHOSE A FAIRE POUR TOI : COMPRENDRE LE SCRIPT avec les checkbox !

Si tu ne comprends pas : inutile d'aller plus loin.
Si tu ne comprends pas certains points du script, JE PEUX te les expliquer. A toi de me dire quel point précis.

N.B. J'ai donnée la solution avec checkbox à la page 4, message #61 de cette discussion.
OBJECTIVEMENT, c'est la solution la plus simple et la mieux adaptée.

On est à la page 7, message #137...

Il serait temps d’arrêter de bavasser, et de s'y mettre sérieusement, non ?

**claude.aignant** · 11/11/2018, 13h44

OK, je t'ai compris, je ferai de mon mieux, vraiment.

OK, je DOIS comprendre ton script, c'est certain.
Il inclut beaucoup de traitements un peu trop abstraits à mon niveau, malgré tes explications très appréciées sur un précédent post.

Je vais encore l'étudier cet AM j'espère, et reviendrai ensuite.
Je crains juste de mal saisir dès le début, et partir sur une mauvaise direction, ce qui risque de me faire perdre bp de temps...

Allez, je m'y met, la boule dans la gorge

...
J'arrête de bavasser.

@+

[Edit] : je bosse, je bosse, je vais revenir vers vous très bientôt (on dit 16h20?)

Invité · 11/11/2018, 14h59

BON...

Regrouper le tout pour utiliser les mêmes fonctions n'est pas aussi simple....

Je suis dessus depuis un moment... pour essayer de "simplifier" et factoriser les fonctions... Pas si simple...

**claude.aignant** · 11/11/2018, 16h22

Bon....

Je suis plein de bonne volonté, et tiens à vous le prouver :-)
Et m'excuse de tout ce temps que je vous prends depuis le début.

Voici mon décorticage (linéaire) du code, quasi mot à mot...
Ce qui vous permettra de me reprendre exactement là où je ferai fausse route.

Le code de @jreaux62 depuis lequel je suis parti pour faire l'analyse (est-ce bien sa dernière version?):

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
<html>
<head>
<style type="text/css">
textarea {
  width:400px;
  height:100px;
}
#categories-checkbox,
#categories-selection {
  display:inline-block;
  padding:10px;
}
#liste-categories-checkbox,
#liste-categories-selection {
  width:380px;
  height:150px;
  overflow-y:auto;
  border:1px dashed #ccc;
  padding:0 10px;
  margin:5px 0 0;
}
#liste-categories-checkbox ul {
  list-style:none;
  padding-left:0;
}
#liste-categories-checkbox ul ul {
  padding-left:15px;
}
#liste-categories-selection ul {
  list-style:disc inside;
  padding-left:15px;
}
</style>
 
</head>
 
 
<textarea id="le-textarea">
<ul class="site-nav nav-position-2" id="accessibleNav">
 
  <li data-dropdown-rel="categorie-1" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 1
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.3</a></li>
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 1.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.1</a></li>
          <li ><a href="/products/produitSZ">Sous-Sous-Catégorie 1.2.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.1</a></li>
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 1.3.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 1.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/products/produitOPD">Sous-Catégorie 1.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li data-dropdown-rel="categorie-2" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 2
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 2.3.1</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li data-dropdown-rel="categorie-3" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 3
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.2.1</a></li>
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 3.2.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.3</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.2</a></li>
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 3.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li class="customer-navlink large--hide"><a href="/account/login" id="customer_login_link">Connexion</a></li>
  <li class="customer-navlink large--hide"><a href="/account/register" id="customer_register_link">Créer un compte</a></li>
 
  </ul>
</textarea>
<button type="button" id="le-button">Parser</button>
 
<div>
  <div id="categories-checkbox">Sélectionnez les Catégories :<br /> 
    <div id="liste-categories-checkbox"></div>
  </div>
  <div id="categories-selection">Catégories choisies :<br /> 
    <textarea id="liste-categories-selection"></textarea>
  </div>
  <button type="button" id="le-button-copie">Copie</button>
</div>
 
<br><br>
<center>Tous tags concaténés :<br><textarea cols="100" rows="5" id="ConcatTousCriteres"></textarea></center>
 
</html>
 
 
 
  <script language="javascript">
'use strict';
// --------------
// variables globales
var le_textarea = document.querySelector('#le-textarea');
var le_button = document.querySelector('#le-button');
var ii='';
// --------------
// categories : objet contenant les catégories, sous-catégories et sous-sous-catégories
var les_categories = [];
// chaque ligne est de la forme : idx:{ txt:"Sous-Sous-Catégorie 1.3.1", lvl:2, par:11 }
// idx : index de la ligne
// txt : le texte (nom de la catégorie)
// lvl : niveau de la catégorie (0:catégorie, 1:sous-catégorie ,2:sous-sous-catégorie)
// par : index de la catégorie parente ('' si pas de parent)
// --------------
// liste des catégories, avec checkbox
var div_liste_categorie_checkbox = document.querySelector('#liste-categories-checkbox');
var div_liste_categorie_selection = document.querySelector('#liste-categories-selection');
// --------------
// clic sur le bouton "Parser"
le_button.addEventListener('click',function(){Parser()});
 
 
function Parser(){
  // --------
  // on récupère le code HTML
  var le_html = le_textarea.value.trim();
  if( le_html == '' )
    {
     alert('Le textarea est vide');
      return false;
    }
  // --------
  // on parse le code HTML
  var parser = new DOMParser();
  var doc_html = parser.parseFromString(le_html, "text/html");
  // --------
  // on récupère les catégories, sous-catégories et sous-sous-catégories dans UN SEUL objet "les_categories"
  // SPECIAL : on NE prend PAS les 2 menus "Connexion" et "Créer un compte" (avec la classe "customer-navlink")
  var elts = doc_html.querySelectorAll('#accessibleNav > li:not(.customer-navlink)');
  les_categories = get_categories_by_level( [], elts, 0, '' );
 
//  console.log( les_categories );
  // --------
  // on vide les listes
  div_liste_categorie_checkbox.innerHTML = '';
//  div_liste_categorie_selection.innerHTML = '';
  div_liste_categorie_selection.value = ''; // textarea
  // --------
  // on construit la liste de checkbox
  var la_liste_categorie_checkbox = liste_checkbox_categories_by_lvl_by_par( les_categories, 0, '' );
  div_liste_categorie_checkbox.innerHTML = la_liste_categorie_checkbox;
 
//  console.log( la_liste_categorie_checkbox );
  // --------
}
// --------------
// fonction récursive de récupération des catégories
function get_categories_by_level( arr=[], elts, lvl=0, par='' )
{
  ii = arr.length;
  elts.forEach( function(elt){
    // si on a des noeuds
    if (elt.hasChildNodes()) 
    {
      // pour chaque noeud
      elt.childNodes.forEach( function(node){
        if (node.tagName && node.tagName.toLowerCase() == 'a')  // lien
        {
            arr[ii] = {'txt':node.textContent.trim(),'lvl':lvl,'par':par};
            ii = arr.length;
        }
        else if (node.tagName && node.tagName.toLowerCase() == 'ul')  // sous-menu ?
        {
          var arr2 = get_categories_by_level( arr, node.childNodes, lvl+1, ii-1 ); // récursivité
          // on regroupe les 2 :
          arr = json_concat( arr, arr2 );
        }
      });
    }
  });
  return arr;
}
// --------------
// fonction de fusion de 2 objets en un seul
function json_concat( o1, o2 )
{
  for (var key in o2) {
    o1[key] = o2[key];
  }
  return o1;
}
 
// --------------
// fonction récursive de création de la liste des checkbox
function liste_checkbox_categories_by_lvl_by_par( arr=[], lvl=0, par='' )
{
  var liste_checkbox = [];
  arr.forEach( function(elt,idx){
    if( elt.lvl == lvl && elt.par == par )
    {
      //     console.log( elt.txt,elt.lvl,elt.par,idx );
      var checkbox = '<label><input type="checkbox" name="cat[]" value="'+idx+'" />'+elt.txt+'</label>';
      // sous-liste ?
      var liste_checkbox2 = liste_checkbox_categories_by_lvl_by_par( arr, lvl+1, idx );
      // on regroupe les 2 :
      checkbox = '<li>'+checkbox+liste_checkbox2+'</li>';
      liste_checkbox.push( checkbox );
    }
  });
  if( liste_checkbox.length > 0 )
  {
    return '<ul>'+liste_checkbox.join("\n")+'</ul>';
  } else {
    return '';
  }
}
// --------------
// Affichage des cases cochées
/*
// la suite NE FONCTIONNE PAS, car les checkbox n existent PAS (encore) dans le DOM !
var les_checkbox = document.querySelectorAll('#liste-categories-checkbox input[type=checkbox]');
les_checkbox.forEach( function(la_checkbox){
  la_checkbox.addEventListener('click',function(){
    alert( la_checkbox.value );
    console.log( la_checkbox.value );
//    div_liste_categorie_selection.innerHTML = get_checkbox_cochees();
    div_liste_categorie_selection.value = get_checkbox_cochees(); // textarea
  });
})
// --------------
// Il faut donc RUSER... et s y prendre AUTREMENT :
// --------------
*/
div_liste_categorie_checkbox.addEventListener('click', function(e){ 
  var initElem = e.target; 
  if(initElem.tagName.toLowerCase() == 'input' && initElem.type == 'checkbox')
  { 
//    div_liste_categorie_selection.innerHTML = get_checkbox_cochees();
    div_liste_categorie_selection.value = get_checkbox_cochees() + ','; // textarea et ',' en fin de chaîne
  } 
});
// --------------
// récupération des cases cochées
function get_checkbox_cochees()
{
  var les_checkbox_cochees = [];
  var les_checkbox = document.querySelectorAll('#liste-categories-checkbox input[type=checkbox]');
  les_checkbox.forEach( function(checkbox){
    if(checkbox.checked)
    {
      console.log( checkbox.value, les_categories[checkbox.value].txt );
      les_checkbox_cochees.push( les_categories[checkbox.value].txt );
    }
  });
//  return '<ul><li>'+les_checkbox_cochees.join('</li><li>')+'</li></ul>'; // concaténation sous forme de liste ul/li
  return les_checkbox_cochees.join(',\n'); // concaténation avec virgule ET saut de ligne
}
// --------------
// copie de la sélection
var le_button_copie = document.querySelector('#le-button-copie');
le_button_copie.addEventListener('click', function(){ 
  var la_copie = div_liste_categorie_selection.value; // textarea
  updateClipboard( la_copie );
});
// --------------
// copie dans le presse-pappier
// https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/interagir_avec_le_presse_papier
function updateClipboard( newClip ) 
{
  navigator.clipboard.writeText(newClip).then(function() {
    /* clipboard successfully set */
    alert( 'La sélection a été copiée : \n'+newClip );
  }, function() {
    /* clipboard write failed */
  });
}
 
</script>
</html>

DONC :

1/ Je comprends correctement les déclarations et contenu de Parser()
-qui trim, crée nouveau DOMParser, alimente elts avec les li via querySelectorAll
-puis renvoie à les_categories le resultat de get_categories_by_level,
-vide les champs, construit la liste via liste_checkbox_categories_by_lvl_by_par et actualise la div

2/ Dans function get_categories_by_level :
Je comprends que le traitement concerne elts (=tous les li de AccessibleNav choppés avec querySelectorAll, sans les 2 derniers relatifs à customer-navlink)
- ligne L285 : je ne comprends pas dans : elts.forEach( function(elt){
=>

que vaut 'elt' à ce moment-là (est-ce bien le 1er li de elts on dirait?)
- L290 : elt.childNodes.forEach(function(node)) : on lui cherche des noeuds enfants qu'on appelle 'node'
SI le noeud enfant a une étiquette (mis en ToLowerCase) d'un lien : on est dans 1 catégorie principale
=> on insère dans le tableau arr[] une ligne de lvl 0 et par vide par défaut et ii vaut la dimension du tableau avant de boucler sur le forEach de function(node)
SINON (et uniquement, pas d'autre par défaut) et que le noeud enfant a une étiquette ul
=>

bon, là déjà j'ai un problème, que fais t'on des balises <span>?!! Ah, c'est bon, elles sont dans le a :-)
=> on crée un tableau arr2 qui (appelle récursivement et) prend le résultat de get_categories_by_level (qui cherche des li, va en trouver ou pas, va alimenter arr[] etc etc...)
- L298 : et à ce moment là on sait qu'on dans dans une sous (ou sous-sous) et donc on fait lvl+1
=>

pour le ii-1 je suppose que c'est pour rester sur le node courant jusqu'à ce qu'il y ait plus de ul dans les li mais pour être honnête c'est plus de l'intuition...
- L300 : quand on a fini d'alimenter les souscateg courantes, on concatène le tableau arr2 à arr via json_concat()
=> question

: du coup les index de arr2 arrivent à la suite du dernier index de arr c'est bien çà?

3/ L309 dans function json_concat()
=>

alors là je comprends pas où est passé value2: '4' suite à la concat ?!!! (voir : https://code.i-harness.com/fr/q/69ddb)

4/ L319 function liste_checkbox_categories_by_lvl_by_par()
- L321 : on crée un tableau liste_checkbox[]
- pour chaque ligne de arr[] :
- L322 :

j'ai du mal à savoir ce que contiennent à ce niveau (elt,idx)
- L323 :

je ne comprends pas la condition : if( elt.lvl == lvl && elt.par == par )
- L326 : on valorise une var checkbox du contenu de la ligne courante de arr[] (pour affichage d'un label - zone checkable)
=>

mais je ne comprends pas d'où a été valorisé cat[] et comment il peut être interprété et remplacé par la suite?
- L328 : on alimente une liste_checkbox2 via un appel récursif de liste_checkbox_categories_by_lvl_by_par() avec niveau supérieur pour gérer les sous-categ
- L330 : checkbox à afficher vaut la case + le libellé, le tout dans un li
- L331 : on alimente le tableau liste_checkbox[]
- L334 : s'il y a au moins 1 ligne dans tableau liste_checkbox[]
- L336 : on indente via nouvelle ul et on y place les li
- L337 : le : else {return '';} exécute le return pour liste_checkbox_categories_by_lvl_by_par()

5/ L358 : div_liste_categorie_checkbox.addEventListener()
=> détecte l'évênement de coche d'une checkbox, alimente le div des cochées via get_checkbox_cochees()

6/ L368 : get_checkbox_cochees()
- L373 : pour chaque checkbox de liste-categories-checkbox
SI elle est cochée :
- L376 : on ajoute une ligne au tableau les_checkbox_cochees[]
- L380 : on concatène tous les élements du tableau pour renvoyer et alimenter div_liste_categorie_selection.value

7/ L384 à L400 : OK, gestion de la copie dans le presse-papier

Pffiouu !!!

Invité · 11/11/2018, 16h50

Bel effort...

...mais ne t'embête pas...

1- Je viens de finir le code : https://codepen.io/jreaux62/pen/WYGZPO

Je viens d'y passer plus de 2-3 heures...
En fait,... c'était BEAUCOUP moins facile que je te l'avais laissé croire....

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<h3>Menu</h3>
<textarea class="donnees" id="textarea-parse-menu">
<ul class="site-nav nav-position-2" id="accessibleNav">
 
  <li data-dropdown-rel="categorie-1" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 1
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.3</a></li>
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 1.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.1</a></li>
          <li ><a href="/products/produitSZ">Sous-Sous-Catégorie 1.2.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.1</a></li>
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 1.3.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 1.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/products/produitOPD">Sous-Catégorie 1.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li data-dropdown-rel="categorie-2" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 2
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 2.3.1</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li data-dropdown-rel="categorie-3" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 3
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.2.1</a></li>
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 3.2.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.3</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.2</a></li>
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 3.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li class="customer-navlink large--hide"><a href="/account/login" id="customer_login_link">Connexion</a></li>
  <li class="customer-navlink large--hide"><a href="/account/register" id="customer_register_link">Créer un compte</a></li>
 
  </ul>
</textarea>
 
<button id="button-parser-menu" type="button">Parser Menu</button>
 
<div class="results">
  <div>Sélectionnez :<br /> 
    <div id="liste-checkbox-menu"></div>
  </div>
  <div>Vos choix :<br /> 
    <textarea id="affiche-result-menu"></textarea>
  </div>
  <button id="button-copier-menu" type="button">Copier les choix</button> 
</div>
 
<!--- ............................... -->
<h3>Caractéristiques Produit 1</h3>
<textarea class="donnees" id="textarea-parse-prd1">
<ul>
  <li>Destinataire
    <ul>
      <li>Homme</li>
      <li>Femme</li>
      <li>Ado</li>
      <li>Enfant</li>
    </ul>
  </li>
  <li>Couleur
    <ul>
      <li>Autre couleur ou nuance</li>
      <li>Couleurs claires</li>
      <li>Couleurs foncées</li>
      <li>Argent</li>
      <li>Bleu</li>
      <li>Blanc</li>
      <li>Gris</li>
      <li>Jaune</li>
      <li>Marron</li>
      <li>Noir</li>
      <li>Orange</li>
      <li>Rose</li>
      <li>Rouge</li>
      <li>Transparent</li>
      <li>Vert</li>
      <li>Violet</li>
    </ul>
  </li>
  <li>Matière
    <ul>
      <li>Autre</li>
      <li>Acier</li>
      <li>Acier Inoxydable</li>
      <li>Alliage</li>
      <li>Aluminium</li>
      <li>Argent</li>
      <li>Argent 925</li>
      <li>Carbure de tungstène</li>
      <li>Métal</li>
      <li>Or</li>
      <li>Or 18K</li>
      <li>Or Blanc</li>
      <li>Or Jaune 18K</li>
      <li>Or Rose</li>
      <li>Palladium</li>
      <li>Plaqué Rhodium</li>
      <li>Platine</li>
      <li>Titane</li>
    </ul>
  </li>
</ul>
</textarea>
 
<button id="button-parser-prd1" type="button">Parser Produit 1</button>
 
<div class="results">
  <div>Sélectionnez :<br /> 
    <div id="liste-checkbox-prd1"></div>
  </div>
  <div>Vos choix :<br /> 
    <textarea id="affiche-result-prd1"></textarea>
  </div>
  <button id="button-copier-prd1" type="button">Copier les choix</button> 
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
.donnees {
  width:400px;
  height:100px;
}
.results > div {
  display:inline-block;
  padding:10px;
}
.results div div,
.results div textarea {
  width:380px;
  height:150px;
  overflow-y:auto;
  border:1px dashed #ccc;
  padding:0 10px;
  margin:5px 0 0;
}
.results div:first-child div ul {
  list-style:none;
  padding-left:0;
}
.results div:first-child div ul ul {
  padding-left:15px;
}
.results div:last-child div ul {
  list-style:disc inside;
  padding-left:15px;
}
 
.results div input[type=checkbox]:checked + span { color:red; }

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
'use strict';
// --------------
// 0- "MENU"
// --------------
// MENU : on définit ici quels textarea/div prendre en compte (pour la fonction action_clic_button_parser)
var id_textarea_menu = 'textarea-parse-menu';
var id_checkbox_menu = 'liste-checkbox-menu';
var id_resultat_menu = 'affiche-result-menu';
// --------
var id_button_parser_menu = 'button-parser-menu';
var id_button_copier_menu = 'button-copier-menu';
// --------
var arrdatas_menu = []; // array
// --------
// MENU : clic sur le bouton "Parser"
document.querySelector('#'+id_button_parser_menu).addEventListener('click', function(){ 
  action_clic_button_parser( id_textarea_menu, id_checkbox_menu, id_resultat_menu, arrdatas_menu, 'MENU' );
});
// --------
// MENU : copie de la sélection
document.querySelector('#'+id_button_copier_menu).addEventListener('click', function(){ 
  copie_to_clipboard( id_resultat_menu );
});
 
// --------------
// 1- "Caractéristiques PRODUIT-1"
// --------------
// PRODUIT-1 : on définit ici quels textarea/div prendre en compte (pour la fonction action_clic_button_parser)
var id_textarea_prd1 = 'textarea-parse-prd1';
var id_checkbox_prd1 = 'liste-checkbox-prd1';
var id_resultat_prd1 = 'affiche-result-prd1';
// --------
var id_button_parser_prd1 = 'button-parser-prd1';
var id_button_copier_prd1 = 'button-copier-prd1';
// --------
var arrdatas_prd1 = []; // array
// --------
// PRODUIT-1 : clic sur le bouton "Parser"
document.querySelector('#'+id_button_parser_prd1).addEventListener('click', function(){ 
  action_clic_button_parser( id_textarea_prd1, id_checkbox_prd1, id_resultat_prd1, arrdatas_prd1, 'PROD' );
});
// --------
// PRODUIT-1 : clic sur le bouton "Copier"
document.querySelector('#'+id_button_copier_prd1).addEventListener('click', function(){ 
  copie_to_clipboard( id_resultat_prd1 );
});
 
// --------------
// 2- "Caractéristiques PRODUIT-2"
// COPIER-COLLER le code de PRODUIT-1, en remplaçant 'prd1' par 'prd2'
// (Idem pour le code HTML)
// .....
// --------------
// ..... (et ainsi de suite pour les AUTRES "Caractéristiques PRODUIT-x"
// --------------
 
 
// --------------
// FONCTIONS COMMUNES
// --------------
// fonction : actions à réaliser au clic sur le bouton "Parser"
function action_clic_button_parser( id_textarea_a_parser, id_div_liste_checkbox, id_div_liste_resultat, array_des_donnees=[], le_type )
{
  // --------
  // variables locales (internes à la fonction)
  var textarea_parse = document.querySelector('#'+id_textarea_a_parser);
  var liste_checkbox = document.querySelector('#'+id_div_liste_checkbox);
  var liste_resultat = document.querySelector('#'+id_div_liste_resultat);
  var array_lesdatas = array_des_donnees;
  // --------
  // on vide les listes
  liste_checkbox.innerHTML = ''; // div (donc .innerHTML)
  liste_resultat.value = ''; // textarea (donc .value)
  // --------
  // on récupère le code HTML
  var le_html = textarea_parse.value.trim(); // textarea (donc .value)
  // --------
  if( le_html == '' )
  {
    alert('Le textarea est vide');
    return false;
  } else {
    // on ajoute un div avec une classe "html_to_parse" (qui va nous servir plus tard)
    le_html = '<div class="html_to_parse">'+le_html+'</div>';
  }
  // --------
  // on parse le code HTML
  var parser = new DOMParser();
  var doc_html = parser.parseFromString(le_html, "text/html");
  // --------
  // on récupère TOUS les niveaux dans UN SEUL objet
  if( le_type == "MENU" )
  {
    // SPECIAL MENU : on NE prend PAS les 2 menus "Connexion" et "Créer un compte" (avec la classe "customer-navlink")
    var elts = doc_html.querySelectorAll('div.html_to_parse > ul > li:not(.customer-navlink)'); // (les li de 1er niveau)
  } else {
    var elts = doc_html.querySelectorAll('div.html_to_parse > ul > li'); // (les li de 1er niveau)
  }
  array_lesdatas = get_lesdatas_by_level( [], elts, 0, '', le_type );
  // --------
  // on construit la liste de checkbox
  var la_liste_checkbox = get_liste_checkbox_by_lvl_by_par( array_lesdatas, 0, '' );
  liste_checkbox.innerHTML = la_liste_checkbox; // div (donc .innerHTML)
 
  // --------
  // clic sur les cases cochées
  // (Important : ce bout de code doit être DANS la fonction, car les checkbox sont créees dynamiquement)
  liste_checkbox.addEventListener('click', function(e){ 
    var initElem = e.target; 
    if(initElem.tagName.toLowerCase() == 'input' && initElem.type == 'checkbox')
    { 
      // on affiche les résultats (checkbox cochées)
      liste_resultat.value = get_checkbox_cochees( id_div_liste_checkbox, array_lesdatas, le_type ); // textarea (donc .value)
//      console.log( liste_resultat.value );
    } 
  });
  // --------
}
// --------------
// fonction récursive de récupération des niveaux
function get_lesdatas_by_level( arr=[], elts, lvl=0, par='', le_type )
{
  ii = arr.length;
  elts.forEach( function(elt){
    // si on a des noeuds
    if (elt.hasChildNodes()) 
    {
      // ----
      if( le_type == "MENU" )
      {
        var le_tag = 'a'; // pour le MENU, on prend le contenu du lien <a> (<li><a>Le texte</a>)
      } else {
        var le_tag = '#text'; // pour les PRODUITS, pas de lien : on prend le contenu du #text (<li>Le texte)
      }
      // ----
      // pour chaque noeud
      elt.childNodes.forEach( function(node){
        // si le noeud est le_tag : on ajoute à arr
        if (node.nodeName && node.nodeName.toLowerCase() == le_tag && node.textContent.trim() !='')
        {
          arr[ii] = {'txt':node.textContent.trim(),'lvl':lvl,'par':par};
          ii = arr.length;
        }
        // si le noeud est 'ul' = on a un sous-niveau : récursivité de la fonction
        else if (node.nodeName && node.nodeName.toLowerCase() == 'ul')  // sous-menu ?
        {
          var arr2 = get_lesdatas_by_level( arr, node.childNodes, lvl+1, ii-1, le_type ); // récursivité
          // on regroupe les 2 :
          arr = json_concat( arr, arr2 );
        }
      // ----
      });
    }
  });
  return arr;
  // arr : array 
  // Chaque ligne est de la forme : idx:{ txt:"Le texte", lvl:2, par:11 }
  // idx : index de la ligne
  // txt : le texte (nom de la catégorie)
  // lvl : le niveau (0:catégorie, 1:sous-catégorie ,2:sous-sous-catégorie, ...)
  // par : index de la ligne/catégorie parente ('' si pas de parent)
}
// --------------
// fonction de fusion de 2 objets en un seul
function json_concat( o1, o2 )
{
  for (var key in o2) {
    o1[key] = o2[key]; // copie de o2 dans o1
  }
  return o1;
}
 
// --------------
// fonction récursive de création de la liste des checkbox
function get_liste_checkbox_by_lvl_by_par( arr=[], lvl=0, par='' )
{
  var liste_checkbox = [];
  arr.forEach( function(elt,idx){
    if( elt.lvl == lvl && elt.par == par ) // pour CE niveau et CE parent
    {
      // ----
      // la checkbox
      var checkbox = '<label><input type="checkbox" value="'+idx+'" /><span>'+elt.txt+'</span></label>';
      // ----
      // récursivité : sous-liste ?
      var liste_checkbox2 = get_liste_checkbox_by_lvl_by_par( arr, lvl+1, idx );
      // ----
      // on regroupe les 2 :
      checkbox = '<li>'+checkbox+liste_checkbox2+'</li>';
      // ----
      // on ajoute à la liste (array)
      liste_checkbox.push( checkbox );
    }
  });
  if( liste_checkbox.length > 0 )
  {
    return '<ul>'+liste_checkbox.join("\n")+'</ul>'; // join : on concatène en une chaine
  } else {
    return '';
  }
}
 
// --------------
// récupération des cases cochées
function get_checkbox_cochees( id_div_liste_checkbox, array_lesdatas, le_type )
{
  var les_checkbox_cochees = [];
  var les_checkbox = document.querySelectorAll('#'+id_div_liste_checkbox+' input[type=checkbox]');
  les_checkbox.forEach( function(checkbox){
    if(checkbox.checked)
    {
      console.log( array_lesdatas[checkbox.value]) ;
      if( array_lesdatas[checkbox.value].lvl != 0 && le_type != 'MENU' )
      {
        // on met devant le nom de la catégorie parente
        les_checkbox_cochees.push( array_lesdatas[Number(array_lesdatas[checkbox.value].par)].txt+'_'+array_lesdatas[checkbox.value].txt );
      } else {
        les_checkbox_cochees.push( array_lesdatas[checkbox.value].txt );
      }
    }
  });
  //  return '<ul><li>'+les_checkbox_cochees.join('</li><li>')+'</li></ul>'; // concaténation sous forme de liste ul/li
  return les_checkbox_cochees.join(','); // concaténation avec virgule
}
 
// --------------
// fonction : copie dans le presse-papier
// https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/interagir_avec_le_presse_papier
function copie_to_clipboard( id_textarea ) 
{
  var newClip = document.querySelector('#'+id_textarea).value;
  navigator.clipboard.writeText(newClip).then(function() {
    // clipboard successfully set
    alert( 'La sélection a été copiée : \n'+newClip );
  }, function() {
    // clipboard write failed
    alert( 'Erreur lors de la copie : \nRecommencez' );
  });
}

2- Pour les "caractéristiques produit", il suffit que tu écrives les listes sous cette forme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
  <li>Destinataire
    <ul>
      <li>Homme</li>
      <li>Femme</li>
      <li>Ado</li>
      <li>Enfant</li>
    </ul>
  </li>
  <li>Couleur
    <ul>
      <li>Autre couleur ou nuance</li>
      <li>Couleurs claires</li>
      <li>Couleurs foncées</li>
      <li>Argent</li>
      <li>Bleu</li>
....

Il est donc TRÈS FACILE et RAPIDE d'ajouter ou supprimer "A LA MAIN" des éléments à la liste.

Invité · 11/11/2018, 16h57

3- Méthode pour ajouter une nouvelle liste de "Caractéristiques Produit".

Là, c'est VRAIMENT TRÈS FACILE.

3a- HTML :

copier-coller ce bout de code HTML, en remplaçant partout : "prd1" par "prd2"
dans le 1er textarea (class="donnees"), remplacer par la nouvelle liste de "caractéristiques"

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!--- ............................... -->
<h3>Caractéristiques Produit 1</h3>
<textarea class="donnees" id="textarea-parse-prd1">
<ul>
  <li>Destinataire
    <ul>
      <li>Homme</li>
      <li>Femme</li>
      <li>Ado</li>
      <li>Enfant</li>
    </ul>
  </li>
  <li>Couleur
    <ul>
      <li>Autre couleur ou nuance</li>
      <li>Couleurs claires</li>
      <li>Couleurs foncées</li>
      <li>Argent</li>
      <li>Bleu</li>
      <li>Blanc</li>
      <li>Gris</li>
      <li>Jaune</li>
      <li>Marron</li>
      <li>Noir</li>
      <li>Orange</li>
      <li>Rose</li>
      <li>Rouge</li>
      <li>Transparent</li>
      <li>Vert</li>
      <li>Violet</li>
    </ul>
  </li>
  <li>Matière
    <ul>
      <li>Autre</li>
      <li>Acier</li>
      <li>Acier Inoxydable</li>
      <li>Alliage</li>
      <li>Aluminium</li>
      <li>Argent</li>
      <li>Argent 925</li>
      <li>Carbure de tungstène</li>
      <li>Métal</li>
      <li>Or</li>
      <li>Or 18K</li>
      <li>Or Blanc</li>
      <li>Or Jaune 18K</li>
      <li>Or Rose</li>
      <li>Palladium</li>
      <li>Plaqué Rhodium</li>
      <li>Platine</li>
      <li>Titane</li>
    </ul>
  </li>
</ul>
</textarea>
 
<button id="button-parser-prd1" type="button">Parser Produit 1</button>
 
<div class="results">
  <div>Sélectionnez :<br /> 
    <div id="liste-checkbox-prd1"></div>
  </div>
  <div>Vos choix :<br /> 
    <textarea id="affiche-result-prd1"></textarea>
  </div>
  <button id="button-copier-prd1" type="button">Copier les choix</button> 
</div>

3b- JavaScript

copier-coller ce bout de code JS, en remplaçant partout : "prd1" par "prd2"
c'est tout

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// --------------
// 1- "Caractéristiques PRODUIT-1"
// --------------
// PRODUIT-1 : on définit ici quels textarea/div prendre en compte (pour la fonction action_clic_button_parser)
var id_textarea_prd1 = 'textarea-parse-prd1';
var id_checkbox_prd1 = 'liste-checkbox-prd1';
var id_resultat_prd1 = 'affiche-result-prd1';
// --------
var id_button_parser_prd1 = 'button-parser-prd1';
var id_button_copier_prd1 = 'button-copier-prd1';
// --------
var arrdatas_prd1 = []; // array
// --------
// PRODUIT-1 : clic sur le bouton "Parser"
document.querySelector('#'+id_button_parser_prd1).addEventListener('click', function(){ 
  action_clic_button_parser( id_textarea_prd1, id_checkbox_prd1, id_resultat_prd1, arrdatas_prd1, 'PROD' );
});
// --------
// PRODUIT-1 : clic sur le bouton "Copier"
document.querySelector('#'+id_button_copier_prd1).addEventListener('click', function(){ 
  copie_to_clipboard( id_resultat_prd1 );
});

Invité · 11/11/2018, 17h20

Ça va ?

Tu n'as pas fait une crise cardiaque ??

**claude.aignant** · 11/11/2018, 17h24

Envoyé par jreaux62

Ça va ?

Tu n'as pas fait une crise cardiaque ??

Je relis attentivement ce que tu as fais et essaie de comprendre lentement

Suis un peu époustouflé, pas de crise cardiaque mais j'en suis pas loin...

Bon, revenu de mes émotions (il m'a fallu 1h30!!!), le script est juste PARFAIT !!!!
En 3 lignes (quelques conditions), j'ai pu ajouter dans get_checkbox_cochees() mes préfixes dédiés à chaque niveau des éléments de menu

J'ai même tenté un Niveau 3 dans les listes...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<ul><li>Destinataire
    <ul>
      <li>Homme</li>
      <li>Femme</li>
      <li>Ado</li>
      <li>Enfant</li>
    </ul>
  </li>
  <li>Couleur
    <ul>
      <li>Autre couleur ou nuance</li>
      <li>Couleurs claires</li>
      <li>Couleurs foncées</li>
    </ul>
  </li>
  <li>Matière
    <ul>
      <li>Autre</li>
      <li>Acier</li>
	<li>Acier Inoxydable
      	  <ul>
  	    <li>Acier Inox 1</li>
	    <li>Acier Inox 2</li>
	    <li>Acier Inox 3</li>
	  </ul>
      </li>
      <li>Alliage</li>
    </ul>
  </li>
</ul>

... mais bon, il doublonne l'affichage et reste en level 2!

Bref, je ne sais pas comment te remercier, je vais avancer plus efficacement désormais.
Tu m'as enlevé une énorme épine du pied, et j'ai usé et abusé de ta patience....
MERCI BEAUCOUP !!!
Et à l'occasion, si je peux abuser encore de ta gentillesse

, si tu peux répondre à mes quelques interrogations du post #136

@ tous ceux qui se sont intéressés de près ou de loin à mon post, @Beginner., merci, pour ta participation, tes exemples, ta patience et tes explications détaillées!!!

Merci !!!

Parse et remplissage de tableaux dynamiques

JavaScript

Discussions similaires

Partager

Partager