Parse et remplissage de tableaux dynamiques

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

Citation:

---

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.

@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.

Citation:

---

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" :ptdr:
Parce que je code que j'y ai greffé est pourri...
:calim2:

Citation:

---

Envoyé par claude.aignant

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

---

A la bonne heure...

Citation:

---

Envoyé par claude.aignant

...Vous allez m'enguirlander...

---

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

Montre ce que tu as fait...

:arf:


:toutcasse:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 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>

---

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... :koi:
Et il nous faudrait un minimum d'explications.

Citation:

---

Envoyé par jreaux62

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

---

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.

Citation:

---

Envoyé par jreaux62

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

---

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

Citation:

---

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.

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. :piou:

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

Code:

---

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

---

par :

Code:

---

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

---

et en CSS :

Code:

---

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

---

Citation:

---

Envoyé par jreaux62

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

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

---

OUI !

Citation:

---

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 :calim2: 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...

Citation:

---

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. :piou:

---

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.....

Citation:

---

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 !

Citation:

---

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 :

Citation:

---

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:

---

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...

Citation:

---

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 :oops:

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 :aie: )

@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 :ccool: "un immense gloubiboulga indigeste"


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

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

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 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.

Citation:

---

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.

Citation:

---

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)

Citation:

---

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...

Citation:

---

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:

---

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>

---

Citation:

---

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...