Parse et remplissage de tableaux dynamiques

**Beginner.** · 09/11/2018, 15h19

Ah ok bon ben c'est bon alors le sujet est clos si je comprends bien...

Invité · 09/11/2018, 15h24

Envoyé par claude.aignant

...Tout fonctionne, traitements opérationnels, mais en mode strict je n'arrive définitivement pas à me défaire de quelques anomalies de type :
Uncaught TypeError: Cannot read property 'value' of undefined
... et j'y perds un temps incroyable à essayer de les anéantir... sans succès!

1- Le mode strict affiche TOUTES les erreurs.
Il FAUT les corriger.

Corriger ces erreurs te garantira un fonctionnement correct sur TOUS les navigateurs.

2- "of undefined ..." : ça veut dire qu'un élément n'est pas défini (ou n'existe pas ou n'a pas été trouvé dans le DOM).
Si tu ne nous en montre pas plus, on ne peux rien dire de plus.

**claude.aignant** · 09/11/2018, 15h38

@jreaux62,

Je n'ai pas tardé à adopté tes checkbox !!! Tellement pratique et adapté...

Pour les 'devoirs', si je te dis qu'entre portée des variables et fonctions, je connaissais déjà 80%, tu ne me croiras pas.
Pour les bases javascript, 50% (m'étaient inconnues querySelector, addEventListener, localStorage)
Je n'ai pas été plus loin, il me fallait avancer un peu plus concrètement sur mon projet..

Je sais qu'il me faut corriger ces satanées erreurs...
Et c'est bien pour çà que j'y ai passé un temps de ouf... Mais je déclare forfait, je peux plus j'ai besoin d'avancer.

Envoyé par @jreaux62

2- "of undefined ..." : ça veut dire qu'un élément n'est pas défini (ou n'existe pas ou n'a pas été trouvé dans le DOM).
Si tu ne nous en montre pas plus, on ne peux rien dire de plus.

J'ai carrément honte!!!! Du code que vous voudriez que je vous présente...
Car il va vous paraître aussi confu que moi. ("comment foutre le bordel dans un code en 24 heures...")
Vous allez m'enguirlander car ce n'est pas correctement indenté, parce que j'ai retouché à vos codes en essayant "d'améliorer"

Parce que je code que j'y ai greffé est pourri...

Invité · 09/11/2018, 15h46

Envoyé par claude.aignant

...Je n'ai pas tardé à adopté tes checkbox !!!...

A la bonne heure...

Envoyé par claude.aignant

...Vous allez m'enguirlander...

Maintenant que tu sais à quoi t'attendre...

Montre ce que tu as fait...

**claude.aignant** · 09/11/2018, 15h51

Code :

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
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
 
<html>
<head>
<style>
	.orange{ background-color:#FF8000;}
	.vert{ background-color:#04B404;}
	.rouge{ background-color:#FF0000;}
</style>
 
<!-- GESTION CASES A COCHER -->
<style type="text/css">
 
 
#GestionMenuVisible {	position: absolute;	top: 0px; left: 0px; background-color: #F8F8FF; border-style: solid; border-color : blue;  }
#GestionMenuHidden {	position: absolute;	top: -9999px; left: -9999px; background-color: #F8F8FF;border-style: solid; border-color : blue; 	}
 
 
#ExempleMenu {  position: absolute;	top: -9999px; left: -9999px;	}
 
 
 
 
 
 
 
 
 
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;
  padding-left: 0px;
 
  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>
<!-- END GESTION CASES A COCHER -->
 
 
 
</head>
<div id="ExempleMenu">
<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>
</div>
 
<br><br><center><b>CONSTRUCTEUR AUTOMATIQUE DE TAGS<br>PRODUITS</b></center>
<form name="form">
 
<br>
<div id="GestionMenuHidden"><br><center><b>Gestion du Menu</b></center><a href="#" onclick="AfficherMasquerMenu(); return false" >Refermer Gestion Menu</a> 
<button type="button" id="ExempleMenuHTML" onclick="InsererMenuHTML();">insérer Menu test</button><br><br>
Copier-coller ici le menu puis <button type="button" id="le-button">Parser le Menu</button><br><br>
<textarea id="le-textarea">
</textarea>
 
<div>
 
<TABLE> 
<TR>
	<TD>
		<div id="categories-checkbox">Catégories MENU Disponibles :<br /> 
		<div id="liste-categories-checkbox"></div>
		</div>
	</TD> 
	<TD>
		<div id="categories-selection">Catégories choisies : <br /> 
		<textarea id="liste-categories-selection"></textarea> <br /> 
		<button type="button" id="le-button-InsererMenu" OnClick="InsererMenu()">INSERER dans TagsMenus</button>
		<br><br><a href="#" onclick="AfficherMasquerMenu(); return false" >Refermer Gestion Menu</a>
		</div>
	</TD> 
</TR>  
</TABLE>
</div><br><br><br>
</div>
 
<br>
 
<center><table>
 
<tr>
  <td><center>Attributs PRODUIT:<br> <b>Caractéristiques<br>Produits</b></center></td>
  <td><center>Attributs 2 :<br> <b>Caractéristiques<br>Divers</b></center></td>
  <td><center>Attributs 3 :<br> <b>Caractéristiques<br>Etc</b></center></td>
  <td><center>Attributs 4 :<br> <b>Caractéristiques<br>Autres produits</b></center></td>
</tr>
 
<tr>
  <td>
<SELECT NAME="CaractéristiquesProduit" id="Attribut01" onChange="ChoixAttribut(this.id,this.value);">
<OPTION>-- Choisissez un attribut ---</OPTION>
<OPTION>Destinataire</OPTION>
<OPTION>Couleur</OPTION>
<OPTION>Matière</OPTION>
</SELECT>
  </td>
  <td>
 
  <SELECT NAME="MenuPERSO" id="Attribut02" onChange="ChoixAttribut(this.id,this.value)">
<OPTION>-- Choisissez un attribut ---</OPTION>
<OPTION>Articles A</OPTION>
<OPTION>Articles B</OPTION>
<OPTION>Articles C</OPTION>
<OPTION>Articles D</OPTION>
</SELECT>
  </td>
  <td>
<SELECT NAME="Couleur" id="Attribut03" onChange='ChoixAttribut(this.id,this.value)'>
<OPTION>-- Choisissez un attribut ---</OPTION>
<OPTION>Couleur</OPTION>
</SELECT>
  </td>
  <td>
<SELECT NAME="Matière" id="Attribut04" onChange='ChoixAttribut(this.id,this.value)'>
<OPTION>-- Choisissez un attribut ---</OPTION>
<OPTION>Matière</OPTION>
</SELECT>
  </td>
</tr>
 
<tr>
  <td><input type="button" OnClick="SurbrillanceValeurs(document.getElementById('Attribut01').value,'Valeur01')" value="Options présentes?"><br>
<SELECT multiple id="Valeur01" OnChange="ChoixValeurs(this.id);" size="1"><br>
<OPTION>-- Choisissez une valeur ---</OPTION>
</SELECT>
  </td>
  <td><input type="button" OnClick="SurbrillanceValeurs(document.getElementById('Attribut02').value,'Valeur02')" value="Options présentes?"><br>
<SELECT multiple id="Valeur02" OnChange="ChoixValeurs(this.id);" size="1"><br>
<OPTION>-- Choisissez une valeur ---</OPTION>
</SELECT>
  </td>
  <td><input type="button" OnClick="SurbrillanceValeurs(document.getElementById('Attribut03').value,'Valeur03')" value="Options présentes?"><br>
<SELECT multiple id="Valeur03" OnChange="ChoixValeurs(this.id);" size="1"><br>
<OPTION>-- Choisissez une valeur ---</OPTION>
</SELECT>
  </td>
  <td><input type="button" OnClick="SurbrillanceValeurs(document.getElementById('Attribut04').value,'Valeur04')" value="Options présentes?"><br>
<SELECT multiple id="Valeur04" OnChange="ChoixValeurs(this.id);" size="1"><br>
<OPTION>-- Choisissez une valeur ---</OPTION>
</SELECT>
  </td>
</tr>
 
<tr>
  <td>
  <center>A</center>
  </td>
  <td>
  <center>B</center>
 </td>
  <td>
  <center>C</center>
 </td>
  <td>
  <center>D</center>
 </td>
</tr>
</table></center>
 
<br>
<center>
	Tags Critères Produit :<br><textarea cols="100" rows="5" id="TagsProduit"></textarea><br>
	Tags Menu du Produit (<a href="#" onclick="AfficherMasquerMenu(); return false" >Gérer Menu</a>) :<br><textarea cols="100" rows="5" id="TagsMenu"></textarea><br><br>
	<button type="button" id="le-button-CompilePressePapier" OnClick="CompilePressePapier()">PRODUIT OK => TAGS DANS PRESSE-PAPIER</button>
</center>
</form>
 
 
 
 
 
<script language="javascript">
'use strict';
// --------------
function replaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}
 
 
 
function ViderLeSelect(selId) {
 
 var sel = document.getElementById(selId);
 //alert("vidage du select " + sel + " qui a pour longueur " + sel.options.length);
 //alert("TagsProduits vaut :" + TagsProduits);
 for (var i=1; i<sel.options.length; i++) {
 	var opt = sel.options[i];
	//alert(opt);
 	//if (opt.selected) {
   sel.removeChild(opt);
   i--;
 	//}
 }
}
 
var TagsProduits = "";
var ChampAttributID = "";
var ChampValeurID = "";
var ChampAttributVALEUR = "";
var ChampValeurVALEUR = "";
var txt ="";
var addr = document.getElementById("GestionMenuHidden");
 
function AfficherMasquerMenu() {
//Active/désactive visibilité DIV menu
{
	if (addr.id == "GestionMenuVisible")	addr.id = "GestionMenuHidden";
	else			addr.id = "GestionMenuVisible";
}
/*
window.onload = function () {
	var addr = document.getElementById("GestionMenuHidden");
}*/
}
 
 
function InsererMenuHTML() {
//insère un menu HTML de test (div ExempleMenu) dans document.getElementById("le-textarea")
document.getElementById("le-textarea").value = document.getElementById("ExempleMenu").innerHTML;
}
 
function ChoixAttribut(ChampAttributID,ChampAttributVALEUR) {
 
//alert("Entrée dans ChoixAttribut");
//alert("TagsProduits vaut :" + TagsProduits);
// si que le 1er selectionné, le désectionner
if (document.getElementById(ChampAttributID).selectedIndex == 0) {
  document.getElementById(ChampAttributID).options[0].selected = false;
  //option 0 désélectionnée
  }
 
 
 
//remet à zéro les options de valeur length
//alert(document.getELementById("Valeur").options.length);
//document.getELementById("Valeur").options.length=1;
 
 
//pour chaque grandselect du haut, dérouler les options qui lui sont propres (donc modifier les references des champs de la page)
 
 
//alert(SelectConcerne);
switch (ChampAttributID) {
 
		case "Attribut01" :
			var ChampValeurID = "Valeur01";
			var ChampAttributID = document.getElementById(ChampAttributID).id;
			var ChampValeurID=document.getElementById(ChampValeurID).id;
 
			if(document.getElementById(ChampAttributID).selectedIndex!=0){var ChampAttributVALEUR = document.getElementById(ChampAttributID).value ;}else{var ChampAttributVALEUR="";}
			if(document.getElementById(ChampValeurID).selectedIndex!=0){var ChampValeurVALEUR = document.getElementById(ChampValeurID).value ;}else{var ChampValeurVALEUR="";}
 
				switch (ChampAttributVALEUR){ // selectionne la liste correspondant à Attribut01
				case "Destinataire" : var txt = new Array ('Homme', 'Femme', 'Ado', 'Enfant'); break;
				case "Couleur" : var txt = new Array ('Autre couleur ou nuance','Couleurs claires','Couleurs foncées','Argent','Bleu','Blanc','Gris','Jaune','Marron','Noir','Orange','Rose','Rouge','Transparent','Vert','Violet'); break;
				case "Matière" : var txt = new Array ('Autre','Acier', 'Acier Inoxydable', 'Alliage', 'Aluminium', 'Argent', 'Argent 925', 'Carbure de tungstène', 'Métal', 'Or', 'Or 18K', 'Or Blanc', 'Or Jaune 18K', 'Or Rose', 'Palladium', 'Plaqué Rhodium', 'Platine', 'Titane'); break;
				}
			ActualiseValeur(ChampAttributID,ChampValeurID,ChampAttributVALEUR,txt);
			break;
 
		case "Attribut02" :
			var ChampValeurID = "Valeur02";
			var ChampAttributID = document.getElementById(ChampAttributID).id;
			var ChampValeurID=document.getElementById(ChampValeurID).id;
 
			if(document.getElementById(ChampAttributID).selectedIndex!=0){var ChampAttributVALEUR = document.getElementById(ChampAttributID).value ;}else{var ChampAttributVALEUR="";}
			if(document.getElementById(ChampValeurID).selectedIndex!=0){var ChampValeurVALEUR = document.getElementById(ChampValeurID).value ;}else{var ChampValeurVALEUR="";}
 
				switch (ChampAttributVALEUR){ // selectionne la liste correspondant à Attribut02
				case "Articles A" : var txt = new Array ('Articles A1', 'Articles A2', 'Articles A3', 'Articles A4', 'Autres'); break;
				case "Articles B" : var txt = new Array ('Articles B1', 'Articles B2', 'Articles B3', 'etc'); break;
				case "Articles C" : var txt = new Array ('Articles C1', 'Articles C2', 'Articles C3', 'Articles C4', 'Articles C5', 'Articles C6'); break;
				case "Articles D" : var txt = new Array ('Articles D1', 'Articles D2', 'Articles D3', 'Articles D4', 'Articles D5', 'Articles D6'); break;
				}
			ActualiseValeur(ChampAttributID,ChampValeurID,ChampAttributVALEUR,txt);
			break;
 
		default :
			alert("Attribut non prévu : créer une liste...");
 
}
 
 
 
 
 
 
 
} 
 
 
 
function ActualiseValeur(ChampAttributID,ChampValeurID,ChampAttributVALEUR,txt)
{
//alert("entree dans ActualiseValeur");
//alert("TagsProduits vaut :" + TagsProduits);
 
// si que le 1er selectionné, le désectionner
if (document.getElementById(ChampValeurID).selectedIndex == 0) {
  document.getElementById(ChampValeurID).elements[0].selected = false;
  //option 0 désélectionnée
  }
 
 
 
ViderLeSelect(ChampValeurID);  //juste avant de le remplir en fonction de l'attribut selectionné
 
//alert("taille actuelle de ChampValeurID = " + document.getElementById(ChampValeurID).size + "\nTaille txt length " + txt.length+1);
document.getElementById(ChampValeurID).size=txt.length+1;
 
// pour chaque element dans le tableau de l'attribut sélectionné, l'afficher dans le bon select valeurs
for (var i=0;i<txt.length;i++) {
		var select = document.getElementById(ChampValeurID);
        var newOption = new Option (txt[i], txt[i]);
        select.options.add (newOption);
		//TagsProduits = ChampAttributVALEUR +"_"+txt[i]+","; // insère les options dans TagsProduits
  //alert("valeur courante inserée dans l option : " + txt[i]) ;
 
 
 
 
 
  }
 
 
 
}
 
 
 
function SurbrillanceValeurs(ChampAttributVALEUR,ChampValeurID){
			// si la valeur est dans TagsProduits mettre en couleur
			//alert('Actuellement, TagsProduits vaut : ' + TagsProduits);
 
					var SizeChampValeurID = document.getElementById(ChampValeurID).length;
					for (var z=1;z<SizeChampValeurID+1;z++) {
						// si libellé de la valeur avec _ est dans TagsProduits, mettre en couleur
					//alert("recherche des valeurs...");
						var cherchee1 = ChampAttributVALEUR + '_' + document.getElementById(ChampValeurID).options[z].value + ',' ; //chercher avec la virgule de fin sinon 'Matière Acier' matche avec 'Matière Acier Inoxydable' !
						//alert("VALEURID = " + ChampValeurID + " - on cherche " + cherchee1 + " dans " + TagsProduits);
 
							if(TagsProduits.indexOf(cherchee1)!=-1){
							//alert("valeur trouvée!");
							//alert('z vaut ' + z + ' et ChampValeurID vaut : ' + ChampValeurID);
							document.getElementById(ChampValeurID).options[z].style.color='#008000'; // '#FF0000'; // fonctionne presque
							//break; //on sort de la boucle
							}
							else{document.getElementById(ChampValeurID).options[z].style.color='#FF0000';} //'#000000';} // couleur si pas trouvé
					  }
}			  			
 
 
 
 
function SurbrillanceAttributs(ChampAttributID, ChampValeurID) // NON UTILISE =>>>>>>>>> METTRE PLUTOT CHANGEMENT DE COULEUR DES OPTIONS DANS SELECT (style="color:black;")
{
// met en surbrillance les options sélectionnées dans AttributID et ValeurID
//alert('Actuellement, TagsProduits vaut : ' + TagsProduits);
//Taille des champs ChampAttributID et ChampValeurID
var SizeChampAttributID = document.getElementById(ChampAttributID).length;
var SizeChampValeurID = document.getElementById(ChampValeurID).length;
 
//alert("SizeChampAttributID = "+ SizeChampAttributID);
//alert("SizeChampValeurID = "+ SizeChampValeurID);
 
	// pour chaque element dans le tableau de l'ATTRIBUT sélectionné, le mettre en selected
 
	for (var i=1;i<SizeChampAttributID+1;i++) {
		// si libellé de l'attribut avec _ est dans TagsProduits, mettre en couleur
 
		//var cherchee = document.getElementById(ChampAttributID).options[i].value + "_" ;
		var cherchee = document.getElementById(ChampAttributID).options[i].value + "_" ;
 
		//alert("ATTRIBUTID = " + ChampAttributID + " - on cherche " + cherchee + " dans " + TagsProduits);
			if(TagsProduits.indexOf(cherchee)!=-1){
			//alert("trouvé!");
			//alert('i vaut ' + i + ' et ChampAttributID vaut : ' + ChampAttributID);
			document.getElementById(ChampAttributID).options[i].style.color='#008000';
			}
			else{document.getElementById(ChampAttributID).options[i].style.color='#FF0000';} 
	}
 
 
 
}// end function Surbrillance()
 
 
 
 
function ChoixValeurs(ChampValeurID)
{
//(ChampValeurID,ChampAttributID,ChampAttributVALEUR,txt)
 
 
// si que le 1er selectionné, rien faire
if (document.getElementById(ChampValeurID).selectedIndex == 0) {
  document.getElementById(ChampValeurID).options[0].selected = false;
  //return;
  //alert("option 0 désélectionnée dans ChampValeurID");
  //option 0 désélectionnée
  }
 
 
// récupère les valeurs actuellement sélectionnées pour le select avec focus
ChampAttributID = 'Attribut' + ChampValeurID.substring(ChampValeurID.length-2); //2 derniers caractères de ChampValeurID
ChampAttributVALEUR = document.getElementById(ChampAttributID).value;
 
//alert("ChampAttributID :" + ChampAttributID + "\nChampAttributVALEUR :"+ ChampAttributVALEUR);
 
 
 
 
//alert("DEBUT etape 1 - actuellement, tagsProduits vaut " + TagsProduits);
 
 
var NewVals = "";
 
 
 
//######################################################################################################################################
//######################################################################################################################################
//######################################################################################################################################
 
 
// 1/
 
//on choppe la liste des valeurs en cours dans le select valeurs et on les stocke dans NEWVALS
 
// ajout dans NEWVALS (à faire en dernier)
 
	for(i=0;i<document.getElementById(ChampValeurID).options.length;i++)
	{ 
		if (document.getElementById(ChampValeurID).options[i].selected&&document.getElementById(ChampValeurID).selectedIndex!=0&&document.getElementById(ChampValeurID).options[i].value!="")
			{ 
			//si valeur présente dans TagsProduits mettre en selected
 
 
			NewVals = NewVals+","+ChampAttributVALEUR+"_"+document.getElementById(ChampValeurID).options[i].value;
			//alert("boucle - valeur NEWVALS vaut : " + NewVals);
 
 
			}
 
 
	} //end for
 
 
 
	//document.getElementById(ChampValeurID).id = "Valeur";
	//formattage de NewVals
	if(NewVals.substring(0,1)==','){NewVals = NewVals.substring(1,NewVals.length)+',';}
 
 
 
 
//######################################################################################################################################
//######################################################################################################################################
//######################################################################################################################################
 
 
// 2/ 
//on vérifie si le critère en cours est existant dans OLDTAGS, SI OUI on supprime les occurrences, CA RESTE OLDTAGS.
 
 
var cherchee = document.getElementById(ChampAttributID).value+"_";
var NewOldTags="";
//on vérifie si le critère en cours est existant dans OLDTAGS, SI OUI on supprime les occurrences, CA RESTE OLDTAGS.
	//alert("etape 2");
	var OldTags = TagsProduits;
	var OldTagsSplit = OldTags.split(',');
 
	for (var i=0; i < OldTagsSplit.length; i++){
		  var evaluee = OldTagsSplit[i];
				//alert("split n°"+i+"| Valeur OldTagsSplit[i] : "+evaluee);
 
				if (evaluee.indexOf(cherchee)!=-1){
				//alert("trouvé " + cherchee + " est dans " + evaluee);
				}else{
				//alert("rien trouvé");
				if(evaluee!=""){NewOldTags=NewOldTags+","+evaluee;+","}}
			//alert("Fin boucle " +i+"\evaluee vaut : " + evaluee + "\nNewOldTags vaut désormais " + NewOldTags);
			}
 
 
 
 
// La liste OldTags est obsolète (on la vide), on utilise désormais NewOldTags, et on ajoutera les nouveaux paramètres du critère en cours
OldTags="";
 
 
//######################################################################################################################################
//######################################################################################################################################
//######################################################################################################################################
 
//3/ On dit que tagsProduits et champtag doit être newTags + NewVals ;
//alert("affectation de TagsProduits");
TagsProduits = NewOldTags + "," + NewVals;
//formattage de TagsProduits
if(TagsProduits.substring(0,1)==','){TagsProduits = TagsProduits.substring(1,TagsProduits.length);} //enlève la virgule de devant...
 
	// On met a jour le champ 
	document.getElementById("TagsProduit").value = TagsProduits;
 
 
 
//document.getElementById(ChampTags).id = "Tags";
NewVals = "";
NewOldTags = "";
//document.getElementById(ChampValeur).id = "Valeur";
 
 
//######################################################################################################################################
//######################################################################################################################################
//######################################################################################################################################
 
	//ConcateneTousCriteres();
 
//alert("fin de choixvaleur");
//alert("TagsProduits vaut :" + TagsProduits);
 
 
			// MET EN SURBRILLANCE ou couleur LES ELEMENTS DANS TAGPRODUIT :
			//pour attributs :
			SurbrillanceAttributs(ChampAttributID, ChampValeurID);
			//pour valeurs :
			SurbrillanceValeurs(ChampAttributVALEUR,ChampValeurID);
 
}
 
 
function ConcateneTousCriteres()
{
 
/*
alert("faire traitement concaténer");
*/
}
 
 
 
// --------------
// copie les TagsProduit et tags Menu le presse-pappier
// https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/interagir_avec_le_presse_papier
function CompilePressePapier( ) 
{
// CompilePressePapier = TagsMenu + TagsProduit
var CompilePressePapier = document.getElementById("TagsMenu").value + document.getElementById("TagsProduit").value ;
  navigator.clipboard.writeText(CompilePressePapier).then(function() {
    /* clipboard successfully set */
    alert( 'La sélection a été copiée : \n'+CompilePressePapier );
  }, function() {
    /* clipboard write failed */
  });
}
 
 
 
 
 
 
// GESTION DES TAGS MENU AVEC CASES A COCHER
 
// --------------
// 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 "InsererMenu"
function InsererMenu(){
  // --------
  // on récupère les tags Menu et insère dans TagsMenu
  var TagsMenu = div_liste_categorie_selection.value ;
  TagsMenu = TagsMenu.replace(/\n|\r/g,''); // remplace tous les sauts de ligne par vide
  document.getElementById("TagsMenu").value = TagsMenu ;
}
 
// --------------
// 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 // non utilisé...
/*
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 ) 
{
// associé au bouton : <button type="button" id="le-button-copie">Copier les catégories sélectionnées</button>
 
  navigator.clipboard.writeText(newClip).then(function() {
    /* clipboard successfully set */
    alert( 'La sélection a été copiée : \n'+newClip );
  }, function() {
    /* clipboard write failed */
  });
}
 
 
 
 
// FIN DE GESTION DES TAGS MENU AVEC CASES A COCHER
 
 
 
</script>
 
 
 
 
 
</html>

Invité · 09/11/2018, 15h55

Ah oui, quand même...
Mon ordi. a tenté de se jeter par la fenêtre.....

Je ne vois pas beaucoup de checkbox là dedans...

Et il nous faudrait un minimum d'explications.

**claude.aignant** · 09/11/2018, 15h59

Envoyé par jreaux62

Je ne vois pas beaucoup de checkbox là dedans...

Ah si LOL, faut cliquer sur un malheureux lien 'caché' entre mes textearea....
çà prenait moins de place

Bon, je rédige quelques explications :
contexte : j'ai X produits (ailleurs), pour lesquels cet outil me permet de spécifier des tags qui lui sont propres...

1/ j'ouvre la page (opération la plus claire)...
2/ Puis je dois tagguer selon l'appartenance au menu, et les caractéristiques du produit.
3/ Pour les caractéristiques, je sélectionne le 1er select en haut à gauche, je choisi, le 2ème select (valeurs) s'actualise, je sélectionne 1 ou X valeurs
4/ Je recommence pour chaque attribut concernant le produit : tantôt je clique sur 'options présentes' pour flagger en couleurs celles déjà sélectionnées...
5/ Pour l'appartenance à l'arborescence, je clique sur le lien 'Gérer Menu', colle mon menu et ajoute les catégories concernées.
6/ Quand j'en ai fini, je clique sur 'insérer dans tag menu'
7/ Quand mon produit est avec tous les tags qui le concernent, je clique sur 'produit OK - tag dans presse-papier' pour concaténer les 2 champs et coller les tags dans ma boutique....

Je passe au produit suivant.

**Beginner.** · 09/11/2018, 16h30

Envoyé par jreaux62

Je ne vois pas beaucoup de checkbox là dedans...

Si si je les ai vues tes checkboxs, après les premières étapes il faut cliquer sur "Gérer Menu"...

**claude.aignant** · 09/11/2018, 16h36

Envoyé par jreaux62

le "menu test" ne correspond pas au résultat dans tes <select>.
Comment veux-tu qu'on recolle les morceaux ?

C'est parce que j'ai 2 référentiels :
- l'un avec les menus (ce sur quoi tu as bossé, avec des checkbox, que j'utilise dans mon outil
- l'un avec des listes concernant des propriétés diverses (critères) et des valeurs associées, qui 'nont rien à voir avec mon menu.

Par contre, ces 2 référentiels doivent se trouver dans un seul endroit dans ma botique : le textarea 'tags' que je dois remplir...

A savoir que j'ai commencé le développement des select pour les attributs AVANT de vous solliciter pour le menu.
J'ai beaucoup travaillé dessus alors, certes, çà fait un peu usine à gaz, mais là je trouve çà plus adapté pour des critères.
Alors que des checkbox sont plus adaptées à un menu.

Invité · 09/11/2018, 16h37

D'accord... Je viens de comprendre...

La partie avec les select est indépendante de la partie "menu" !

DONC :

compte tenu que la partie "Tags Menu du Produit" (menu / checkbox) fonctionne très bien...
POURQUOI ne pas faire la même chose avec la partie "Tags Critères Produit" (actuellement gérée avec des <select>) ?

Il est BEAUCOUP plus PRATIQUE de gérer des checkbox (cochée/pas cochée) que des <select multiple> *, qui plus est quand il y en a plusieurs !

*

sélectionne plusieurs option ("Ctrl"+clic) : Ok, ça marche.
re-clique sur une option (on oublie le "Ctrl", et on fait un clic simple) (qu'on aurait oublié de sélectionner) : on perd toutes les sélections précédentes...
obligé de tout refaire...
et on pleure.

Invité · 09/11/2018, 16h46

Gestion du menu :
Voilà une petite modif. à faire, pour colorer les catégories choisies (checkbox cochées) :
Remplacer :

Code :

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

      var checkbox = '<label><input type="checkbox" name="cat[]" value="'+idx+'" />'+elt.txt+'</label>';

par :

Code :

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

      var checkbox = '<label><input type="checkbox" name="cat[]" value="'+idx+'" /><span>'+elt.txt+'</span></label>';

et en CSS :

Code css :

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

input[type=checkbox]:checked + span { color:red; }

**claude.aignant** · 09/11/2018, 16h51

Envoyé par jreaux62

D'accord... Je viens de comprendre...

La partie avec les select est indépendante de la partie "menu" !

OUI !

Envoyé par jreaux62

POURQUOI ne pas faire la même chose avec la partie "Tags Critères Produit" (actuellement gérée avec des <select>) ?

Il est BEAUCOUP plus PRATIQUE de gérer des checkbox (cochée/pas cochée) que des <select multiple> *, qui plus est quand il y en a plusieurs !

J'ai vraiment du mal à me l'imaginer (et celà impliquait que je refasse tout), et franchement avec le temps et l'énergie que j'y ai mis, c'est impossible

et je ne comptais pas du tout vous solliciter pour çà, juste m'aider à corriger mes erreurs JS en strict, qui me perturbent franchement et me font perdre beaucoup de temps...

Envoyé par jreaux62

sélectionne plusieurs option ("Ctrl"+clic) : Ok, ça marche.
re-clique sur une option (on oublie le "Ctrl", et on fait un clic simple) (qu'on aurait oublié de sélectionner) : on perd toutes les sélections précédentes...
obligé de tout refaire...
et on pleure.

J'avoue, en terme d'expérience utilisateur, c'est franchement pas top...
Mais c'est exécuté en local, il n'y a que moi qui vais pratiquer, et vu le mal que j'ai eu à arriver à un traitement potable, je m'en serai contenté, bon gré mal gré et avec une fierté toute relative.
On peut pas tout avoir, et quand on sait pas bien faire, on fait comme on peut, et avec ce qu'on a.....

Invité · 09/11/2018, 16h55

Envoyé par claude.aignant

J'avoue, en terme d'expérience utilisateur, c'est franchement pas top...

Non. C'est carrément nul.
Même si tu es le seul à l'utiliser, je te donne 3 jours avant de jeter ton ordi. par la fenêtre (alors qu'il n'aura rien demandé, lui...)

Remplacer les <select> par des checkbox est TRES SIMPLE et RAPIDE ! **
Moi, ça m'avait pris 1/4 d'heure MAXI.

** Oui, enfin.....
Quand on regarde ton code.... il faudrait tout jeter et tout refaire...

Je ne sais pas comment tu t'y retrouves : tu as mélangé tous les codes et fonctions JS dans un immense gloubiboulga indigeste !

**Beginner.** · 09/11/2018, 16h59

Envoyé par claude.aignant

Tout fonctionne, traitements opérationnels, mais en mode strict je n'arrive définitivement pas à me défaire de quelques anomalies de type :

Uncaught TypeError: Cannot read property 'value' of undefined

... et j'y perds un temps incroyable à essayer de les anéantir... sans succès!

Cette erreur on l'a plusieurs fois et c'est comme l'a expliqué jreaux62 et plus précisément prenons un exemple :

Code :

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
function SurbrillanceAttributs(ChampAttributID, ChampValeurID) // NON UTILISE =>>>>>>>>> METTRE PLUTOT CHANGEMENT DE COULEUR DES OPTIONS DANS SELECT (style="color:black;")
  {
    // met en surbrillance les options sélectionnées dans AttributID et ValeurID
    //alert('Actuellement, TagsProduits vaut : ' + TagsProduits);
    //Taille des champs ChampAttributID et ChampValeurID
    var SizeChampAttributID = document.getElementById(ChampAttributID).length;
    var SizeChampValeurID = document.getElementById(ChampValeurID).length;
 
    //alert("SizeChampAttributID = "+ SizeChampAttributID);
    //alert("SizeChampValeurID = "+ SizeChampValeurID);
 
    // pour chaque element dans le tableau de l'ATTRIBUT sélectionné, le mettre en selected
 
    for (var i = 1; i < SizeChampAttributID + 1; i++) {
      // si libellé de l'attribut avec _ est dans TagsProduits, mettre en couleur
 
      //var cherchee = document.getElementById(ChampAttributID).options[i].value + "_" ;
      var cherchee = document.getElementById(ChampAttributID).options[i].value + "_";
 
      //alert("ATTRIBUTID = " + ChampAttributID + " - on cherche " + cherchee + " dans " + TagsProduits);
      if (TagsProduits.indexOf(cherchee) != -1) {
        //alert("trouvé!");
        //alert('i vaut ' + i + ' et ChampAttributID vaut : ' + ChampAttributID);
        document.getElementById(ChampAttributID).options[i].style.color = '#008000';
      }
      else { document.getElementById(ChampAttributID).options[i].style.color = '#FF0000'; }
    }
 
 
 
  }// end function Surbrillance()

Le problème se situe à la ligne 18 : document.getElementById(ChampAttributID).options[i] n'est pas défini pour le dernier indice de la boucle et c'est normal tu as oublié que la liste commence à l'indice 0.

Regarde ta boucle : for (var i = 1; i < SizeChampAttributID + 1; i++) { elle commence à l'indice 1 et va jusqu'à "SizeChampAttributID" c'est-à-dire "document.getElementById(ChampAttributID).length" or à cet indice il n'y a rien, tu va au delà de la taille de la liste, donc c'est indéfini...

C'est pareil pour les autres boucles...

**claude.aignant** · 09/11/2018, 17h04

Envoyé par jreaux62

Quand on regarde ton code.... il faudrait tout jeter et tout refaire...

Hé oui, c'est bien ce qui m'incite à ne pas essayer de toute refaire

En plus là pour aujourd'hui, je ne peux plus m'y coller (ce dimanche matin encore peut-être), et voilà plus rien ou presque jusque la semaine d'après!!!!
Tu comprends bien qu'à ce rythme là, avant de reprendre tout ou partie de mon code, je pèse bien le pour et le contre....

M'enfin, grâce à vous, cette semaine, j'ai bien avancé et j'ai le sentiment d'avoir appris (ré-appris) plein de choses.
Même si vous ne le voyez pas, chez moi, çà fait tilt..

Merci encore (d'ailleurs, merci pour la modif, mais je vois rien, je pense que je place mal le CSS

)

@Beginner.
Je vais essayer de voir çà plus précisément dimanche matin, merci beaucoup.
Le problème de mémoire c'est que je voulais évincer la 1ère option de liste (index 0) car elle ne devait pas être sélectionnée, et si je modifie, il me zappe les dernières options..

@jreaux62
L'expression que je cherchais

"un immense gloubiboulga indigeste"

Je reviens dimanche matin j'espère, ne vous formalisez pas si je ne peux pas répondre avant svp

Invité · 09/11/2018, 17h13

Je vois que le contenu de tes <select> est défini ici :

Code :

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
function ChoixAttribut(ChampAttributID,ChampAttributVALEUR) {
 
  // si que le 1er selectionné, le désectionner
  if (document.getElementById(ChampAttributID).selectedIndex == 0) {
    document.getElementById(ChampAttributID).options[0].selected = false;
    //option 0 désélectionnée
  }
  //remet à zéro les options de valeur length
  //alert(document.getELementById("Valeur").options.length);
  //document.getELementById("Valeur").options.length=1;
  //pour chaque grandselect du haut, dérouler les options qui lui sont propres (donc modifier les references des champs de la page)
  //alert(SelectConcerne);
  switch (ChampAttributID) {
    case "Attribut01" :
      var ChampValeurID = "Valeur01";
      var ChampAttributID = document.getElementById(ChampAttributID).id;
      var ChampValeurID=document.getElementById(ChampValeurID).id;
      if(document.getElementById(ChampAttributID).selectedIndex!=0){var ChampAttributVALEUR = document.getElementById(ChampAttributID).value ;}else{var ChampAttributVALEUR="";}
      if(document.getElementById(ChampValeurID).selectedIndex!=0){var ChampValeurVALEUR = document.getElementById(ChampValeurID).value ;}else{var ChampValeurVALEUR="";}
      switch (ChampAttributVALEUR){ // selectionne la liste correspondant à Attribut01
        case "Destinataire" : var txt = new Array ('Homme', 'Femme', 'Ado', 'Enfant'); break;
        case "Couleur" : var txt = new Array ('Autre couleur ou nuance','Couleurs claires','Couleurs foncées','Argent','Bleu','Blanc','Gris','Jaune','Marron','Noir','Orange','Rose','Rouge','Transparent','Vert','Violet'); break;
        case "Matière" : var txt = new Array ('Autre','Acier', 'Acier Inoxydable', 'Alliage', 'Aluminium', 'Argent', 'Argent 925', 'Carbure de tungstène', 'Métal', 'Or', 'Or 18K', 'Or Blanc', 'Or Jaune 18K', 'Or Rose', 'Palladium', 'Plaqué Rhodium', 'Platine', 'Titane'); break;
      }
      ActualiseValeur(ChampAttributID,ChampValeurID,ChampAttributVALEUR,txt);
      break;
    case "Attribut02" :
      var ChampValeurID = "Valeur02";
      var ChampAttributID = document.getElementById(ChampAttributID).id;
      var ChampValeurID=document.getElementById(ChampValeurID).id;
      if(document.getElementById(ChampAttributID).selectedIndex!=0){var ChampAttributVALEUR = document.getElementById(ChampAttributID).value ;}else{var ChampAttributVALEUR="";}
      if(document.getElementById(ChampValeurID).selectedIndex!=0){var ChampValeurVALEUR = document.getElementById(ChampValeurID).value ;}else{var ChampValeurVALEUR="";}
      switch (ChampAttributVALEUR){ // selectionne la liste correspondant à Attribut02
        case "Articles A" : var txt = new Array ('Articles A1', 'Articles A2', 'Articles A3', 'Articles A4', 'Autres'); break;
        case "Articles B" : var txt = new Array ('Articles B1', 'Articles B2', 'Articles B3', 'etc'); break;
        case "Articles C" : var txt = new Array ('Articles C1', 'Articles C2', 'Articles C3', 'Articles C4', 'Articles C5', 'Articles C6'); break;
        case "Articles D" : var txt = new Array ('Articles D1', 'Articles D2', 'Articles D3', 'Articles D4', 'Articles D5', 'Articles D6'); break;
      }
      ActualiseValeur(ChampAttributID,ChampValeurID,ChampAttributVALEUR,txt);
      break;
    default :
      alert("Attribut non prévu : créer une liste...");
  }
}

Et dans la "vrai vie", ça va se passer comment ? (ajout/modification de critères-produit,....)

Tu as vu comment est structurée la variable les_categories, générée via le "menu" ?

Tu peux très bien créer d'autres variables sur le même principe, pour tes critères produit.

Si tu arrives à faire ça :
il te faudra 10 minutes pour remplacer les select par des checkbox, tout en supprimant les 3/4 de tes fonctions inutiles.

**claude.aignant** · 09/11/2018, 17h20

Envoyé par jreaux62

Et dans la "vrai vie", ça va se passer comment ? (ajout/modification de critères-produit,....)

Je ne m'imaginais pas faire autre chose que de compléter à la main (pas en BDD) au fur et à mesure que des critères/valeurs s'ajoutent.

Envoyé par jreaux62

Tu as vu comment est structurée la variable les_categories, générée via le "menu" ?
Tu peux très bien créer d'autres variables sur le même principe, pour tes critères produit.
Si tu arrives à faire ça :
il te faudra 10 minutes pour remplacer les select par des checkbox, tout en supprimant les 3/4 de tes fonctions inutiles.

Oui, j'ai vu, j'ai tenté de m'y frotter, mais j'ai eu du mal...
Réussi à ajouter (selon ton modèle) un ajout de ligne, mais alors pour faire en sorte que l'option grandisse -et s'actualise- en fonction, j'ai vraiment eu du mal.

Dimanche matin, je vois le problème qu'à relevé Beginner. et si je réussi rapidement (!) j'essaierai de débuter d'appliquer ton conseil (pas très sûr de moi.....)

Merci, bonne soirée à vous et à dimanche j'espère (ou +++ si vous pouvez pas mdr)

**Beginner.** · 09/11/2018, 17h29

Envoyé par claude.aignant

@Beginner.
Je vais essayer de voir çà plus précisément dimanche matin, merci beaucoup.
Le problème de mémoire c'est que je voulais évincer la 1ère option de liste (index 0) car elle ne devait pas être sélectionnée, et si je modifie, il me zappe les dernières options..

Ben tu peux commencer à l'indice 1 si tu veux mais tu ne peux pas aller au delà de la taille de la liste...

C'est-à-dire le premier indice de la liste c'est 0 et le dernier c'est "taliste.length - 1" et non "taliste.length", donc tu peux faire taliste[taliste.length - 1] mais par contre taliste[taliste.length] est indéfini.

Si la taille c'est 3 alors le dernier indice c'est 2 et donc taliste[2] est le dernier élément de "taliste" mais par contre taliste[3] est indéfini.

---> Ceci dit tu veux gérer toi-même la coloration mais il faudrait voir si il n'y a pas moyen de faire ça avec du HTML/CSS, je découvre aussi cette question donc c'est à voir...

Invité · 09/11/2018, 17h45

Envoyé par jreaux62

Tu as vu comment est structurée la variable les_categories, générée via le "menu" ?
Tu peux très bien créer d'autres variables sur le même principe, pour tes critères produit.

Oublie.

ENCORE PLUS SIMPLE : il suffit d'écrire les critères dans un liste <ul><li>, exactement comme le menu, et le mettre dans un textarea.
Ensuite, on a déjà toutes les fonctions nécessaires (à adapter)

Voici un exemple (reprenant ton 1er <select>) :

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
<textarea id="les-attributs-produit-list-1">
<ul>
  <li>
    <span>Destinataire</span>
    <ul>
      <li>Homme</li>
      <li>Femme</li>
      <li>Ado</li>
      <li>Enfant</li>
    </ul>
  </li>
  <li>
    <span>Couleur</span>
    <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>
    <span>Matière</span>
    <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>

**Beginner.** · 09/11/2018, 17h52

Envoyé par Beginner.

---> Ceci dit tu veux gérer toi-même la coloration mais il faudrait voir si il n'y a pas moyen de faire ça avec du HTML/CSS, je découvre aussi cette question donc c'est à voir...

Je viens de revoir cet exemple : https://developer.mozilla.org/en-US/...Options#Result et apparemment on ne peut pas sélectionner plusieurs options non consécutives une par une, on peut sélectionner plusieurs options mais seulement si elles sont consécutives...

Je ne vois pas comment on peut sélectionner par exemple la première option (et la mettre en vert par exemple) puis un peu plus tard la troisième option pour avoir le première option et la troisième en vert...

Et c'est bien ce que tu veux faire ?

Si oui eh bien tu vas revenir à ce qu'on fait avec les checkbox !

Mais bon c'est faisable mais je suggère d'utiliser une class pour mettre une couleur à chaque option sélectionnée et d'ailleurs dans ce cas inutile que le select* soit "multiple"... Et si tu veux récupérer toutes les options sélectionnées eh bien c'est facile avec la class...

* En fait il n'y a pas besoin de select c'est peut-être mieux de l'éviter car il y a un comportement par défaut qui permet de sélectionner une option et la mettre en surbrillance...
Une simple liste serait préférable avec ou sans checkbox... Mais bon puisque tu as déjà une solution avec checkbox...

Parse et remplissage de tableaux dynamiques

JavaScript

Discussions similaires

Partager

Partager