Parse et remplissage de tableaux dynamiques

Invité · 07/11/2018, 19h09

Re.

Comme j'ai de la suite dans les idées, j'ai fait une version avec affichage d'une liste de checkbox : https://codepen.io/jreaux62/pen/Gwojyg

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<textarea id="le-textarea">
<ul class="site-nav nav-position-2" id="accessibleNav">
 
  <li data-dropdown-rel="categorie-1" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 1
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.3</a></li>
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 1.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.1</a></li>
          <li ><a href="/products/produitSZ">Sous-Sous-Catégorie 1.2.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.1</a></li>
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 1.3.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 1.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/products/produitOPD">Sous-Catégorie 1.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li data-dropdown-rel="categorie-2" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 2
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 2.3.1</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li data-dropdown-rel="categorie-3" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 3
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.2.1</a></li>
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 3.2.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.3</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.2</a></li>
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 3.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li class="customer-navlink large--hide"><a href="/account/login" id="customer_login_link">Connexion</a></li>
  <li class="customer-navlink large--hide"><a href="/account/register" id="customer_register_link">Créer un compte</a></li>
 
  </ul>
</textarea>
<button type="button" id="le-button">Parser</button>
 
<div>
  <div id="categories-checkbox">Sélectionnez les Catégories :
    <div id="liste-categories-checkbox"></div>
  </div>
  <div id="categories-selection">Catégories choisies : 
    <div id="liste-categories-selection"></div>
  </div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
textarea {
  width:400px;
  height:100px;
}
#categories-checkbox,
#categories-selection {
  display:inline-block;
  padding:10px;
}
#liste-categories-checkbox,
#liste-categories-selection {
  width:380px;
  height:150px;
  overflow-y:auto;
  border:1px dashed #ccc;
  padding:0 10px;
  margin:10px 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;
}

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
// --------------
// variables globales
var le_textarea = document.querySelector('#le-textarea');
var le_button = document.querySelector('#le-button');
// --------------
// categories : objet contenant les catégories, sous-catégories et sous-sous-catégories
var les_categories = [];
// chaque ligne est de la forme : idx:{ txt:"Sous-Sous-Catégorie 1.3.1", lvl:2, par:11 }
// idx : index de la ligne
// txt : le texte (nom de la catégorie)
// lvl : niveau de la catégorie (0:catégorie, 1:sous-catégorie ,2:sous-sous-catégorie)
// par : index de la catégorie parente ('' si pas de parent)
// --------------
// liste des catégories, avec checkbox
var div_liste_categorie_checkbox = document.querySelector('#liste-categories-checkbox');
var div_liste_categorie_selection = document.querySelector('#liste-categories-selection');
// --------------
// clic sur le bouton "Parser"
le_button.addEventListener('click',function(){
  // --------
  // 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 = '';
  // --------
  // 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();
  });
})
// 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();
  } 
});
// --------------
// 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>'; // sous forme de liste
}
// --------------

**claude.aignant** · 07/11/2018, 19h30

Je ne sais plus où mettre la tête, votre esprit avance bien plus vite que le mien.....
C'est vraiment cool, çà paraît tellement simple et fluide pour vous...

@jreaux62 :
En terme de comportement, c'est excellent.
Mais ma difficulté est de devoir les lister dans un textarea, et surtout de pouvoir les y enlever lorsque je les décoche....

Invité · 07/11/2018, 19h36

Envoyé par claude.aignant

...Mais ma difficulté....

Je n'ai pas non plus dit que j'allais te mâcher tout le travail...

...et surtout de pouvoir les y enlever lorsque je les décoche....

C'est bien ce qui se passe avec mon code.

**Beginner.** · 07/11/2018, 19h50

Envoyé par jreaux62

Comme j'ai de la suite dans les idées, j'ai fait une version avec affichage d'une liste de checkbox : https://codepen.io/jreaux62/pen/Gwojyg

+1. Pour moi c'est beaucoup mieux, plus lisible...

**claude.aignant** · 07/11/2018, 20h06

Envoyé par jreaux62

Je n'ai pas non plus dit que j'allais te mâcher tout le travail...

C'est bien ce qui se passe avec mon code.

Ce n'est pas ce que je veux, pas de souci, ce que tu fais est déjà énorme..

En attendant, je me frottais un peu à l'autre code avec selects.
Le but : au clic sur l'un des boutons associé à chaque select, appeler une fonction qui insère le text de l'option (formatté) dans un textarea.
Prévoir d'ores et déjà un dispositif pour différencier les entrées et les en enlever au besoin (un 2nd bouton 'supprimer')...
Une fois mes tags pour un produit intégralement listés, je supprime le préfixe d'indice via un clic sur un autre bouton (encore inexistant)

Sur la page HTML j'ai :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
<div>
  Catégories : <select id="select-lvl-0"></select> <button type="button" id="le-buttonAddCatlvl0">Ajouter Catégorie</button><br>
  Sous-Catégories : <select id="select-lvl-1"></select> <button type="button" id="le-buttonAddCatlvl1">Ajouter Sous-Catégorie</button><br>
  Sous-Sous-Catégories : <select id="select-lvl-2"></select> <button type="button" id="le-buttonAddCatlvl2">Ajouter Sous-sous-Catégorie</button><br>
</div> 
 
<br><br>
<center>Tous tags concaténés :<br><textarea cols="100" rows="5" id="ConcatTousCriteres"></textarea></center>
 
</html>

En JS j'ai :

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
 
// variables globales
var le_textarea = document.querySelector('#le-textarea');
var le_button = document.querySelector('#le-button');
var le_buttonAddCatlvl0 = document.querySelector('#le-buttonAddCatlvl0');
var le_buttonAddCatlvl1 = document.querySelector('#le-buttonAddCatlvl1');
var le_buttonAddCatlvl2 = document.querySelector('#le-buttonAddCatlvl2');
// --------------
// 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)
// --------------
// les <select>
var le_select_1 = document.querySelector('#select-lvl-0');
var le_select_2 = document.querySelector('#select-lvl-1');
var le_select_3 = document.querySelector('#select-lvl-2');
//---------------
// les <champs>
var ConcatTousCriteres = document.querySelector('#ConcatTousCriteres');
//---------------
// clic sur le bouton "Ajouter Categ"
le_buttonAddCatlvl0.addEventListener('click',AjouterCat(le_select_1.value));
le_buttonAddCatlvl1.addEventListener('click',AjouterCat(le_select_2.value));
le_buttonAddCatlvl2.addEventListener('click',AjouterCat(le_select_3.value));
// --------------
function AjouterCat(le_select){
  // --------
  alert(le_select);
  //on récupère en paramètres le select concerné
  var le_select = le_select_1.value;
  if(le_select==""){return false;} 
  // on ajoute à textarea après formattage
  var prefixe = le_select_1.value + '_Catégorie_'; //permet de reconnaître pour supprimer/ajouter option // sera supprimé à la fin
  alert(les_categories[le_select.value].txt);
  //alert( le_select_1.options[le_select_1.selectedIndex].text);
  ConcatTousCriteres.value += prefixe + les_categories[le_select].txt + ',';
 
} 
// --------------
// clic sur le bouton "Parser"

...mais :

- j'ai une alert vide qui se déclenche dès le chargement (comprends pas pourquoi...)
- une impossibilité d'envoyer un (voire plusieurs) paramètres dans une fonction

Invité · 07/11/2018, 20h36

OK.

1- Si tu veux aller plus loin, il va falloir ouvrir une nouvelle discussion.

Car dans celle-ci, je pense qu'on a répondu à la problématique initiale.

2- Je ne pense vraiment pas que les <select> soit la bonne solution.
D'un point de vue "ergonomie", ce n'est pas idéal.

Ce que tu veut faire (mettre dans un textarea), ne me semble pas, là non plus, la solution la plus simple.
Comme tu l'as constaté toi-même, ça va supposer d'identifier chaque ligne, et de gérer des boutons "Ajouter" / "supprimer".

Par conséquent, je ne continuerais pas dans cette voie.

3- La solution avec les checkbox que j'ai proposée est :

ergonomique : c'est facile à utiliser (on coche / décoche)
pratique : on coche, ça s'affiche, on décoche, ça ne s'affiche plus dans "catégories choisies".

Reste encore juste à :

lister les catégories sélectionnées dans une variable (array JS)
avoir un bouton final pour "Enregistrer les catégories sélectionnées".

**claude.aignant** · 07/11/2018, 21h04

En effet, la problématique est largement résolue.
Je clôt la discussion, et je vais tenter de trouver une solution pour le reste.

Merci à tous, franchement.

**Beginner.** · 07/11/2018, 21h55

Envoyé par claude.aignant

...mais :

- j'ai une alert vide qui se déclenche dès le chargement (comprends pas pourquoi...)
- une impossibilité d'envoyer un (voire plusieurs) paramètres dans une fonction

Il y a un problème avec cette partie-là :

Code javascript :

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

1
2
3
le_buttonAddCatlvl0.addEventListener('click',AjouterCat(le_select_1.value));
le_buttonAddCatlvl1.addEventListener('click',AjouterCat(le_select_2.value));
le_buttonAddCatlvl2.addEventListener('click',AjouterCat(le_select_3.value));

Le second paramètre de la fonction addEventListener() doit être une fonction* (pour cela tu peux par exemple mettre le nom d'une fonction) mais là toi tu mets Ajouter(le_select_1.value) (ce n'est pas le nom d'une fonction) et là ce qui se passe c'est que l’interpréteur va exécuter Ajouter(le_select_1.value) et si une valeur est retournée par cette fonction eh bien c'est cette valeur qui sera le second paramètre de la fonction addEventListener() et évidement ce n'est pas ce que tu veux...

Pour mieux visualiser la chose on peut reformuler, c'est comme si on avait :

Code javascript :

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

1
2
3
 
var ret = AjouterCat(le_select_1.value);
le_buttonAddCatlvl0.addEventListener('click',ret);

Or "ret" n'est pas une fonction...

Par contre si tu écris cela : le_buttonAddCatlvl0.addEventListener('click', AjouterCat);... Là ok.

AjouterCat ---> nom d'une fonction.
AjouterCat(le_select_1.value) --> exécute la fonction "AjouterCat" avec le paramètre "le_select_1.value".

Je ne sais si je suis clair ???

* En fait cela doit être :

listener
l'objet qui recevra une notification (un objet qui implémente l'interface Event) lorsqu'un évènement du type spécifié se produit. Il doit s'agir d'un objet implémentant l'interface EventListener ou une fonction JavaScript.

Source : https://developer.mozilla.org/fr/doc...dEventListener

Invité · 07/11/2018, 22h43

Pour faire simple, il faut écrire :

Code :

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

1
2
3
le_buttonAddCatlvl0.addEventListener('click', function(){
   AjouterCat(le_select_1.value);
});

**Beginner.** · 07/11/2018, 23h04

Envoyé par jreaux62

Pour faire simple, il faut écrire :

Code :

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

1
2
3
le_buttonAddCatlvl0.addEventListener('click', functions(){
   AjouterCat(le_select_1.value));
});

Oui bien vu* (on peut utiliser une fonction anonyme comme second paramètre) ! (*sauf quelques erreurs de frappe en rouge : pas de "s" à "function" et une ")" en trop à la fin de AjouterCat(le_select_1.value));).

Sinon il y a d'autres erreurs comme : alert(les_categories[le_select.value].txt); c'est plutôt alert(les_categories[le_select].txt);...

**Beginner.** · 07/11/2018, 23h17

Sinon entre temps j'avais modifié le code de cette manière :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// les <champs>
var ConcatTousCriteres = document.querySelector('#ConcatTousCriteres');
//---------------
// clic sur le bouton "Ajouter Categ"
//le_buttonAddCatlvl0.addEventListener('click', AjouterCat(le_select_1.value));
le_buttonAddCatlvl0.addEventListener('click', AjouterCat);
le_buttonAddCatlvl1.addEventListener('click', AjouterCat);
le_buttonAddCatlvl2.addEventListener('click', AjouterCat);
 
le_buttonAddCatlvl0.addEventListener('click', function(){
    AjouterCat(le_select_1.value);
 });
// --------------
function AjouterCat(event) {
 
    var idOfcliquedButton = event.target.id;
    console.log(idOfcliquedButton);
    var le_select;
 
    if (idOfcliquedButton === "le-buttonAddCatlvl0") {
        le_select = le_select_1.value;
    }
    else if (idOfcliquedButton === "le-buttonAddCatlvl1") {
        le_select = le_select_2.value;
 
    }
    else if (idOfcliquedButton === "le-buttonAddCatlvl2") {
        le_select = le_select_3.value;
    }
 
 
    if (le_select == "") { return false; }
    // on ajoute à textarea après formattage
    var prefixe = le_select_1.value + '_Catégorie_'; //permet de reconnaître pour supprimer/ajouter option // sera supprimé à la fin
    //alert(les_categories[le_select.value].txt); // erreur !!!
    alert(les_categories[le_select].txt);
    //alert( le_select_1.options[le_select_1.selectedIndex].text);
    ConcatTousCriteres.value += prefixe + les_categories[le_select].txt + ',\n';
}

J'ai ajouté un saut de ligne pour avoir plus de lisibilité quand on lit la textarea mais on peut l'enlever après...

Voici pour tester : https://jsbin.com/gatucajone/edit?js,output

Ce code ajoute à la textarea les options sélectionnées (quand on clique sur l'un des trois boutons) mais tel qu'il est le code peut ajouter une même option plusieurs fois...
Si ce n'est pas voulu il faudra ajouter du code pour l'éviter...

Là j'ai juste corrigé le code pour donner une idée, je ne prétends rien de plus...lol

Invité · 07/11/2018, 23h25

C'est bien ce que je disais : comparé aux checkbox, les select sont hyper-fastidieux !

**Beginner.** · 07/11/2018, 23h31

Ah bah oui on est d'accord... Après si c'est ce que veut l'auteur, chacun ses gouts... Mais ça doit être faisable...

**claude.aignant** · 08/11/2018, 09h23

Bonjour !

C'est très clair, j'ai parfaitement compris avec vos indications!

Du coup, pour rester dans la 'logique de développement' que j'avais imaginé (valoriser le paramètre le_select depuis addEventListener), et par défi personnel (mais j'ai compris et je vais adopter ce que propose @Beginner. et l'intérêt en terme de clarté du code...), voilà ce que j'ai fais (en déclarant le_select en global plus haut):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// clic sur le bouton "Ajouter Categ"
le_buttonAddCatlvl0.addEventListener('click',function(){if(le_select_1.value==""){return false;}else{le_select=le_select_1.value;AjouterCat()}});
le_buttonAddCatlvl1.addEventListener('click',function(){if(le_select_2.value==""){return false;}else{le_select=le_select_2.value;AjouterCat()}});
le_buttonAddCatlvl2.addEventListener('click',function(){if(le_select_3.value==""){return false;}else{le_select=le_select_3.value;AjouterCat()}});
// --------------
function AjouterCat(){
  // --------
  //le_select est déjà valorisé avant l'appel
  // on ajoute à textarea après formattage
  var prefixe = le_select + '_Catégorie_'; //permet de reconnaître pour supprimer/ajouter option // sera supprimé à la fin
  //alert(les_categories[le_select].txt);
  ConcatTousCriteres.value += prefixe + les_categories[le_select].txt + ',';
}

Bon, pour moi aussi, ce code ajoute à la textarea les options sélectionnées (quand on clique sur l'un des trois boutons) ET le code peut ajouter une même option plusieurs fois (ce qui n'est pas voulu évidemment), mais je vais le gérer plutôt en amont (j'espère) en tentant de coloriser dans le_select_X les options déjà insérées...

Et ne vous formalisez pas sur ma persévérance à utiliser des select, pour l'instant c'est juste pour m'exercer à manipuler le code, et avec une coloration des options, et un size à 6, çà change un peu la donne et pourrait me faire gagner un peu de place aussi sur la page. A voir...

Invité · 08/11/2018, 09h53

Bonjour,

1- Tes 3 lignes sont fausses.
C'est typique du débutant : croire qu'on peut/doit écrire tout sur une seule ligne de code...

2- Si j'ai bien compris, l'objectif est d'afficher la liste des choix dans un textarea.
Fais la liste de toutes les étapes qu'il te faut encore faire pour obtenir le résultat voulu.

N.B. avec mes checkbox, j'en ai pour 5 minutes a remplacer le div par un textarea, et la liste ul/li par des virgules.
Et j'ai atteint l'objectif.

[Édit] Voilà. C'est fait : [EDIT] code effacé par erreur...

Donc : je te laisse jouer avec tes select, et Beginner.
Ceci dit, c'est un bon exercice, mais j'avais cru comprendre que tu avais peu de temps...

**claude.aignant** · 08/11/2018, 09h56

Envoyé par jreaux62

Bonjour,

1- Tes 3 lignes sont fausses.
C'est typique du débutant : croire qu'on peut/doit écrire tout sur une seule ligne de code...

Fausses?!
Je comprends pas, çà marche plutôt très bien chez moi (j'obtiens le résultat voulu), et je ne vois pas en quoi elles sont fausses...

Et le temps que je perds à manipuler le code est à mon sens un investissement pour la suite.

[Edit] ~~j'ai testé ton nouveau code mais les catégories choisies ne s'alimentent pas à priori~~
= ok vu ton com : la suite NE FONCTIONNE PAS, car les checkbox n existent PAS (encore) dans le DOM !

Invité · 08/11/2018, 10h32

Le commentaire "// la suite NE FONCTIONNE PAS...." ne vaut que pour les quelques lignes de code qui suivent (grisées).
Il faut LIRE jusqu'au bout : "// Il faut donc RUSER :"...

J'en ai profité pour ajouter un bouton "Copier"... : copie de la sélection dans le presse-papier.

Interagir avec le presse-papier

Code html :

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

  <button type="button" id="le-button-copie">Copie</button>

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// --------------
// copie de la sélection
var le_button_copie = document.querySelector('#le-button-copie');
le_button_copie.addEventListener('click', function(){ 
  var la_copie = div_liste_categorie_selection.value; // textarea
  updateClipboard( la_copie );
});
// --------------
// coipe dans le presse-pappier
// https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/interagir_avec_le_presse_papier
function updateClipboard( newClip ) 
{
  navigator.clipboard.writeText(newClip).then(function() {
    /* clipboard successfully set */
    alert( 'La sélection a été copiée : \n'+newClip );
  }, function() {
    /* clipboard write failed */
  });
}

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

Ca fonctionne très bien en effet.

Par contre j'aimerai bien savoir où mes 3 lignes sont 'fausses'.
J'ai aucune erreur de syntaxe, rien sans la console, et le comportement souhaité qui s'exécute...

Qu'est-ce-qui n'irait pas dans ces 3 lignes?
Dois-je préférer déclarer le_select en local ou global?

Invité · 08/11/2018, 10h50

1- C'est essentiellement une erreur de logique.

return false ne sert à rien
le_select n'est pas déclarée, ni utilisé

Et tout écrire sur une seule ligne ne t'apportera que de la confusion.

2- Ajoute tout en haut du code JavaScript (juste après la balise <script>) :

Code :

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

'use strict';

3- Sinon, montre au moins le code complet.

**claude.aignant** · 08/11/2018, 11h09

Envoyé par jreaux62

return false ne sert à rien
le_select n'est pas déclarée, ni utilisé

Ben pour moi return false je l'ai mis par 'sécurité' (je suis parfois trop explicit....)
Et le_select est bien déclaré ET utilisé à mon sens.

Bref, actuellement avec mon code ci-dessous, tout fonctionne...

Mais avec JS mode strict, j'ai l'impression que les erreurs ne sont pas dans les (petits bouts de) codes que j'ai produis, je sais pas, je te laisse voir :

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
 
<html>
 
 
<textarea id="le-textarea" cols="100" rows="5" >
<ul class="site-nav nav-position-2" id="accessibleNav">
 
  <li data-dropdown-rel="categorie-1" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 1
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.3</a></li>
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 1.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.1</a></li>
          <li ><a href="/products/produitSZ">Sous-Sous-Catégorie 1.2.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.1</a></li>
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 1.3.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 1.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/products/produitOPD">Sous-Catégorie 1.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li data-dropdown-rel="categorie-2" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 2
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 2.3.1</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li data-dropdown-rel="categorie-3" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 3
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.2.1</a></li>
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 3.2.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.3</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.2</a></li>
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 3.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li class="customer-navlink large--hide"><a href="/account/login" id="customer_login_link">Connexion</a></li>
  <li class="customer-navlink large--hide"><a href="/account/register" id="customer_register_link">Créer un compte</a></li>
 
  </ul>
</textarea>
<br><button type="button" id="le-button">Parser</button>
 
<div>
  <button type="button" id="le-buttonCompleterlvl0">Compléter...</button>Catégories : <select id="select-lvl-0"></select> <button type="button" id="le-buttonAddCatlvl0">Ajouter la Catégorie</button><br>
  Sous-Catégories : <select id="select-lvl-1"></select> <button type="button" id="le-buttonAddCatlvl1">Ajouter la Sous-Catégorie</button><br>
  Sous-Sous-Catégories : <select id="select-lvl-2"></select> <button type="button" id="le-buttonAddCatlvl2">Ajouter la Sous-sous-Catégorie</button><br>
</div> 
 
<br><br>
<center>Tous tags concaténés :<br><textarea cols="100" rows="5" id="ConcatTousCriteres"></textarea></center>
 
</html>
 
 
 
  <script language="javascript">
  // --------------
  "use strict";
  // --------------
  // variables globales
var le_textarea = document.querySelector('#le-textarea');
var le_button = document.querySelector('#le-button');
var le_buttonAddCatlvl0 = document.querySelector('#le-buttonAddCatlvl0');
var le_buttonAddCatlvl1 = document.querySelector('#le-buttonAddCatlvl1');
var le_buttonAddCatlvl2 = document.querySelector('#le-buttonAddCatlvl2');
var le_buttonCompleterlvl0 = document.querySelector('#le-buttonCompleterlvl0');
// --------------
// 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)
// --------------
// les <select>
var le_select_1 = document.querySelector('#select-lvl-0');
var le_select_2 = document.querySelector('#select-lvl-1');
var le_select_3 = document.querySelector('#select-lvl-2');
var le_select = '';
//---------------
// les <champs>
var ConcatTousCriteres = document.querySelector('#ConcatTousCriteres');
//---------------
// clic sur le bouton "Ajouter Categ"
//le_buttonAddCatlvl0.addEventListener('click',AjouterCat(){if(le_select_1.value==""){return false;var le_select=le_select_1.value;AjoutCat()}});
le_buttonAddCatlvl0.addEventListener('click',function(){if(le_select_1.value==""){return false;}else{le_select=le_select_1.value;AjouterCat(le_select)}});
le_buttonAddCatlvl1.addEventListener('click',function(){if(le_select_2.value==""){return false;}else{le_select=le_select_2.value;AjouterCat(le_select)}});
le_buttonAddCatlvl2.addEventListener('click',function(){if(le_select_3.value==""){return false;}else{le_select=le_select_3.value;AjouterCat(le_select)}});
// --------------
// clic sur le bouton "Compléter... Categ"
//le_buttonCompleterlvl0.addEventListener('click',function(){if(le_select_1.value==""){return false;}else{le_select=le_select_1.value;CompleterCat(le_select)}});
// --------------
function AjouterCat(){
  // --------
  //le_select est déjà valorisé avant l'appel
  // on ajoute à textarea après formattage
  var prefixe = le_select + '_Catégorie_'; //permet de reconnaître pour supprimer/ajouter option // sera supprimé à la fin
  //alert(les_categories[le_select].txt);
  ConcatTousCriteres.value += prefixe + les_categories[le_select].txt + ',';
 
} 
// --------------
function CompleterCat(le_select){ // en cours de tests....
  // --------
  //le_select est déjà valorisé avant l'appel
  // on ajoute une option à la liste des catégories
  //alert(le_select);
  alert('avant ajout : ' + les_categories.length);
  les_categories.push({ txt: "Nouvelle Option...", lvl: 1, par: 0 });
  alert('après ajout : ' + les_categories.length);
  Parser();
} 
// --------------
// clic sur le bouton "Parser"
le_button.addEventListener('click',function(){Parser()}); // plus souple...
  // --------
// --------------
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 vide les <select>
  le_select_1.innerHTML = '';
  le_select_2.innerHTML = '';
  le_select_3.innerHTML = '';
  // --------
  // 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 construit les options du 1er <select>
  var le_select_categorie_lvl_0 = '';
  le_select_categorie_lvl_0 = select_options_categorie_by_level_by_parent( les_categories, 0, '' );
//  console.log( le_select_categorie_lvl_0 );
  le_select_1.innerHTML = le_select_categorie_lvl_0; // on remplit le 1er <select>
}
// --------------
// 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;
}
// --------------
// 1er <select> : on affiche les options dans le 2ème (sous-catégories)
le_select_1.addEventListener('change',function(elt){
//  console.log( this.value );
  if( this.value != '')
    {
      le_select_2.innerHTML = select_options_categorie_by_level_by_parent( les_categories, 1, this.value );
      le_select_3.innerHTML = '';
    } else {
      le_select_2.innerHTML = '';
      le_select_3.innerHTML = '';
    }
});
// --------------
// 2ème <select> : on affiche les options dans le 3ème (sous-sous-catégories)
le_select_2.addEventListener('change',function(elt){
//  console.log( this.value );
  if( this.value != '')
    {
      le_select_3.innerHTML = select_options_categorie_by_level_by_parent( les_categories, 2, this.value );
    } else {
      le_select_3.innerHTML = '';
    }
});
// --------------
// fonction de création des <option> par niveau et catégorie parente
function select_options_categorie_by_level_by_parent( arr=[], lvl=0, par='' )
{
  var options = [];
  var option = '<option value="">...</option>'; // option vide
  options.push( option );
  arr.forEach( function(elt,idx){
    if( elt.lvl == lvl && elt.par == par )
    {
 //     console.log( elt.txt,elt.lvl,elt.par,idx );
      var option = '<option value="'+idx+'">'+elt.txt+'</option>';
      options.push( option );
    }
  });
  return options.join("\n");
}
// --------------
 
  </script>

[Edit] pour ton code, je pense que tu peux aisément partir sur celui ci-dessus, je n'ai pas changé grand-chose au code originel (avec les select)
[Edit] et avec les cases à cocher, j'avais (rapidement..) tout 'compilé' une version 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
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
Source : https://codepen.io/jreaux62/pen/Gwojyg
 
<textarea id="le-textarea">
<ul class="site-nav nav-position-2" id="accessibleNav">
 
  <li data-dropdown-rel="categorie-1" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 1
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.3</a></li>
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 1.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.1</a></li>
          <li ><a href="/products/produitSZ">Sous-Sous-Catégorie 1.2.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.1</a></li>
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 1.3.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 1.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/products/produitOPD">Sous-Catégorie 1.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li data-dropdown-rel="categorie-2" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 2
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 2.3.1</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li data-dropdown-rel="categorie-3" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 3
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.2.1</a></li>
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 3.2.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.3</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.2</a></li>
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 3.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li class="customer-navlink large--hide"><a href="/account/login" id="customer_login_link">Connexion</a></li>
  <li class="customer-navlink large--hide"><a href="/account/register" id="customer_register_link">Créer un compte</a></li>
 
  </ul>
</textarea>
<button type="button" id="le-button">Parser</button>
 
<div>
  <div id="categories-checkbox">Sélectionnez les Catégories :
    <div id="liste-categories-checkbox"></div>
  </div>
  <div id="categories-selection">Catégories choisies : 
    <div id="liste-categories-selection"></div>
  </div>
</div>
 
CSS: 
textarea {
  width:400px;
  height:100px;
}
#categories-checkbox,
#categories-selection {
  display:inline-block;
  padding:10px;
}
#liste-categories-checkbox,
#liste-categories-selection {
  width:380px;
  height:150px;
  overflow-y:auto;
  border:1px dashed #ccc;
  padding:0 10px;
  margin:10px 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;
}
 
 
JAVASCRIPT :
 
// --------------
// variables globales
var le_textarea = document.querySelector('#le-textarea');
var le_button = document.querySelector('#le-button');
// --------------
// categories : objet contenant les catégories, sous-catégories et sous-sous-catégories
var les_categories = [];
// chaque ligne est de la forme : idx:{ txt:"Sous-Sous-Catégorie 1.3.1", lvl:2, par:11 }
// idx : index de la ligne
// txt : le texte (nom de la catégorie)
// lvl : niveau de la catégorie (0:catégorie, 1:sous-catégorie ,2:sous-sous-catégorie)
// par : index de la catégorie parente ('' si pas de parent)
// --------------
// liste des catégories, avec checkbox
var div_liste_categorie_checkbox = document.querySelector('#liste-categories-checkbox');
var div_liste_categorie_selection = document.querySelector('#liste-categories-selection');
// --------------
// clic sur le bouton "Parser"
le_button.addEventListener('click',function(){
  // --------
  // 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 = '';
  // --------
  // 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();
  });
})
// Il faut donc RUSER :
*/
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();
  } 
});
// --------------
// 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>'; // sous forme de liste
}
// --------------

Parse et remplissage de tableaux dynamiques

JavaScript

Discussions similaires

Partager

Partager