Affichage listes liées

**niighthawk** · 08/04/2019, 04h21

Voici mon code Pen, j'aurais besoin de votre précieuse aide

https://codepen.io/niighthawk/pen/jRMYQz

J'aimerais que quand j'ai remplis les 3 premieres liste ( 1 2 3 ) que 4 5 6 automatiquement affiche ce qui s'y trouve ( car ils y a toujours juste 1 options ) et cela devient redondant chaque fois devoir aller les sélectionner pour que la boite 6 affiche l'image. et je sais pas trop pas ou commencer

Nom : 1.jpg
Affichages : 248
Taille : 47,6 Ko

Merci

**Watilin** · 08/04/2019, 12h51

Salut,
jette un œil à selectedIndex

**psychadelic** · 09/04/2019, 02h30

C'est typiquement une système de décision par les données

elles doivent donc refléter une logique de décision par elles-mêmes, et le code doit être à leur service.

Donc, j'ai fait ça:

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>multi selects</title>
</head>
<body>
  <select id="marques-select" ></select> 
  <select id="types-select" ></select>
  <select id="modeles-select"></select> 
  <select id="cables-select"></select> 
  <select id="programmes-select"></select>
  <select id="facades-select"></select>
 
  <script>
    const
      Base_Sel = [
          { DOMelm : document.querySelector('#marques-select'),    chxZero :'--- Choisissez une marque ---', init:'0-marques', action :1 }
        , { DOMelm : document.querySelector('#types-select'),      chxZero :'--- Types ---',                 init:'',          action :2 }
        , { DOMelm : document.querySelector('#modeles-select'),    chxZero :'--- Modèles ---',               init:'',          action :3 }
        , { DOMelm : document.querySelector('#cables-select'),     chxZero :'--- Cables ---',                init:'',          action :4 }
        , { DOMelm : document.querySelector('#programmes-select'), chxZero :'--- Programmes ---',            init:'',          action :5 }
        , { DOMelm : document.querySelector('#facades-select'),    chxZero :'--- Facades ---',               init:'',          action :-1 }
      ],
      Content_Sets = {
        '0-marques': [ ['Motorola','moto'], ['Kenwood','ken'], ['Icom','ico'], ['Vertex','ver'], ['Hytera','hyt'] ],
        '1-moto'   : [ ['Mobiles','mm'], ['Portatifs','mp'], ['Répéteurs','mr'], ['Micro','mmic'] ],
        '1-ken'    : [ ['Mobiles','km'], ['Portatifs','kp'], ['Répéteurs','kr'], ['Micro','kmic'] ],
        '1-ico'    : [ ['Mobiles','im'], ['Portatifs','ip'], ['Répéteurs','ir'] ],
        '1-ver'    : [ ['Mobiles','vm'], ['Portatifs','vp'], ['Répéteurs','vr'] ],
        '1-hyt'    : [ ['Mobiles','hm'], ['Portatifs','hp'], ['Répéteurs','hr'] ],
        '2-mm'     : [ ['CDM 1250','cdm1250'], ['CM 200','cm200'], ['CM 200d','cm200d'], ['M 1225','m1225'] ]
        
        // à continuer ....
      };
 
      // initializzationne des selects...
      // - - - - - - - -  - - - - - - - - - - - -
      Base_Sel.forEach( (refBaseSel , idx)=> {
        initOptions ( idx, refBaseSel.init );
        refBaseSel.DOMelm.dataset.refBase = idx.toString();
        refBaseSel.DOMelm.onchange        = SelectChanged;
      })
 
      function initOptions ( BS_idx, SetRef ) 
      {
        let
          theSelect = Base_Sel[BS_idx].DOMelm,
          initLine  = Base_Sel[BS_idx].chxZero
        ;
        theSelect.innerHTML    = null;
        theSelect[0]            = new Option(initLine,'');
        theSelect.selectedIndex = 0;
        theSelect[0].disabled   = true;
 
        if ( '' != SetRef )
        {
          Content_Sets[SetRef].forEach( function(pair,item)
          {
            theSelect[(item+1)] = new Option(pair[0],pair[1]);
          })
        }
      }
 
      function SelectChanged(e) {
        let
          ref   = parseInt(this.dataset.refBase),
          SelId = Base_Sel[ref].action
        ;
        initOptions(SelId, (SelId+'-'+this.value) );
      }
 
/*   <select id="facades-select"   onChange="document.getElementById('facadesimg').src=this.value" */
  </script>
</body>
</html>

il reste encore des trucs à coder, comme l'effet de cascade quand on revient sur un choix antérieur de select...

Invité · 09/04/2019, 11h58

1- @psychadelic
J'aime bien ton :

// initializzationne des selects...

Ça fait "accent méridional"

Un reproche quand même : METS des commentaires/explications dans ton code.

2- Par contre, quelques erreurs :

TypeError: Content_Sets[SetRef] is undefined

Nécessite de vérifier l'existence de l'élément dans l'array.

3- Cela dit, pour en revenir à la problématique initiale :

"afficher/sélectionner automatiquement l'option, quand il n'y a QU'UNE SEULE option POSSIBLE"

Comme l'énoncé l'indique :

Il faut en effet tester qu'il n'y a QU'UNE SEULE option POSSIBLE

**psychadelic** · 09/04/2019, 12h49

@ jreaux62
le code n'est pas complet, et je n'ai pas non plus envie de le faire , à vu de nez ily doit y avoir 5 + (5*4) +(5*4*4) + (5*4*4*4) + (5*4*4*4*4) + (5*4*4*4*4) lignes à remplir dans l'objet Content_Sets
donc c'est normal qu'il y ait cette erreur

TypeError: Content_Sets[SetRef] is undefined

vu que j'en ai mis seulement 7 dans cet objet.
D'ailleurs niighthawk lui même ne donne pas cette information dans son code sous CodePen,

J'ai vu que ce qu'il avait créé le menait dans un cauchemars de codage, ce qui à motivé ma réponse (le principe de décision par les données ici organisé dans seulement 2 objets JS)

sinon, je n'ai pas vraiment saisi son principe des 3 premiers selects conditionnant les 3 derniers, alors il doit y avoir certainement des truc à changer dans mon code, mais dans quel but??

Sinon le code n'est pas terminé, et il risque d'y avoir un remaniement pour la gestion du dernier select affichant des images...
j'ai peut-être une idée, mais je préféré avoir un retour de la part niighthawk avant d'y revenir, et c'est pareil pour la gestion par défaut dans le cas ou il n'ait qu'un seul élément.

**NoSmoking** · 09/04/2019, 13h45

Bonjour,

Envoyé par niighthawk

... car ils y a toujours juste 1 options ...

c'est effectivement une bonne chose que de s'épargner la sélection quand celle-ci est évidente.

Cela reste un problème trivial à gérer, il te suffit d'affecter le selectedIndex à l'unique option de ton <select>.

Le seul « soucis » est que dans ce cas le onchange ne sera pas déclenché, il te faut donc le prévoir dans la focntion en retournant par exemple le selectedIndex.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * Adds given options to a given select
 **/
function addOptions(select, options) {
  console.log(select, options)
  options.forEach(function(option) {
    select.options.add(new Option(option.name, option.id));
  });
  // selection par défaut si pas de choix
  if (options.length == 1) {
    select.selectedIndex = 1;
  }
  return select.selectedIndex;
}

Dans tes fonctions il te suffira de tester cette valeur pour déclencher la fonction onchange du <select> suivant, par exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * Updates programmes
 */
function updateProgrammes() {
  var selectedCables = cablesSelect.value;
  var options = programmes.filter(function(programmes) {
    return programmes.cables === selectedCables;
  });
  removeOptions(programmesSelect);
  removeOptions(facadesSelect);
  // un seul choix déjà fait
  if (1 === addOptions(programmesSelect, options)) {
    updateFacades()
  }
}

Il serait plus élégant de « trigger » le onchange mais bon !

Bonus :
Je ne résiste pas à l'envie de te recommander cet article, Créer des listes déroulantes liées entre elles sans utiliser Ajax qui est tpout à fait dans l'esprit de ce que tu réalises, oui je sais je ne suis pas impartial sur ce coup.

**niighthawk** · 10/04/2019, 12h24

Envoyé par psychadelic

J'ai vu que ce qu'il avait créé le menait dans un cauchemars de codage, ce qui à motivé ma réponse (le principe de décision par les données ici organisé dans seulement 2 objets JS)

sinon, je n'ai pas vraiment saisi son principe des 3 premiers selects conditionnant les 3 derniers, alors il doit y avoir certainement des truc à changer dans mon code, mais dans quel but??

Salut Psychadelic, oui effectivement c'est un beau cauchemar à ajouté des nouvelles données, mais je ne trouve rien d'autre sur le web pour mes besoins, je suis plus une bidouilleuse de code ( j'arrive à modifier des codes que je trouve ici et la sur le web pour mes besoins perso... la raison de mon message ici... en faite les 3 premiers selects sont les plus importantes c'est la que mes radios se trouvent. En suite les 3 dernières sont chaque fois associées à mon 3e select ( modèle du radio = 1 type de câble + 1 type de programme + 1 image de la façade du radio ), mais je savais pas trop comment afficher l'information en dehors d'un select vu que chaque radio possède 3 infos conditionnelles différentes l’une de l'autre. ( selon mon image en haut de sujet ) #4-5-6 dépend de #3

Donc c'est sur j'aimerais simplifier le code de beaucoup pour faciliter l'insertion de données .. Mais tout ce que je trouve sur le web sont des trucs à 2 selects et ou sinon très compliquer à modifier. sinon merci de ton aide ici

très apprécié

Envoyé par NoSmoking

Bonjour,....

Merci

j'ai testé ton code et uniquement la colonne CABLE s'affiche automatiquement les 2 dernières n'ont plus d'options.

Oui je vais aller jeté un oeil à ton lien, car effectivement le code n'est pas de moi, mais je me débrouille pour l'adapté à mes besoins et c'est immense la quantité de données à traiter manuellement et il m'en reste beaucoup à rajouter .. c’est beaucoup d’ID à traiter, etc.

Merci de vos aides à tous.

**NoSmoking** · 10/04/2019, 14h08

j'ai testé ton code et uniquement la colonne CABLE s'affiche automatiquement les 2 dernières n'ont plus d'options.

il te faut ajouter le même type de contrôle sur toutes tes fonctions pour déclencher la cascade ou au moins à partir de la fonction updateCables et en appelant les bonnes fonctions bien sûr :

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
/**
 * Updates cables
 */
function updateCables() {
  var selectedModeles = modelesSelect.value;
  var options = cables.filter(function(cables) {
    return cables.modeles === selectedModeles;
  });
  removeOptions(cablesSelect);
  removeOptions(programmesSelect);
  removeOptions(facadesSelect);
  // un seul choix déjà fait
  if (1 === addOptions(cablesSelect, options)) {
    updateProgrammes()
  }
}
/**
 * Updates programmes
 */
function updateProgrammes() {
  var selectedCables = cablesSelect.value;
  var options = programmes.filter(function(programmes) {
    return programmes.cables === selectedCables;
  });
  removeOptions(programmesSelect);
  removeOptions(facadesSelect);
  // un seul choix déjà fait
  if (1 === addOptions(programmesSelect, options)) {
    updateFacades()
  }
}
/**
 * Updates facades
 */
function updateFacades() {
  var selectedProgrammes = programmesSelect.value;
  var options = facades.filter(function(facades) {
    return facades.programmes === selectedProgrammes;
  });
  removeOptions(facadesSelect);
  // un seul choix déjà fait
  if (1 === addOptions(facadesSelect, options)) {
    document.getElementById('facadesimg').src = facadesSelect.value
  }
}

Concernant tes données elles ne sont pas si déconnantes que cela mais les créer dynamiquement n'est peut-être pas le meilleur choix, tu pourrais passer par des données de type JSON, par exemple on obtient via ton code
data : marques

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
var marques = [{
  "id": "moto",
  "name": "Motorola"
}, {
  "id": "ken",
  "name": "Kenwood"
}, {
  "id": "ico",
  "name": "Icom"
}, {
  "id": "ver",
  "name": "Vertex"
}, {
  "id": "hyt",
  "name": "Hytera"
}];

data : types

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
var types = [{
  "id": "mm",
  "name": "Mobiles",
  "marques": "moto"
}, {
  "id": "mp",
  "name": "Portatifs",
  "marques": "moto"
}, {
  "id": "mr",
  "name": "Répéteurs",
  "marques": "moto"
}, {
  "id": "mmic",
  "name": "Micro",
  "marques": "moto"
}, {
  "id": "km",
  "name": "Mobiles",
  "marques": "ken"
}, {
  "id": "kp",
  "name": "Portatifs",
  "marques": "ken"
}, {
  "id": "kr",
  "name": "Répéteurs",
  "marques": "ken"
}, {
  "id": "kmic",
  "name": "Micro",
  "marques": "ken"
}, {
  "id": "im",
  "name": "Mobiles",
  "marques": "ico"
}, {
  "id": "ip",
  "name": "Portatifs",
  "marques": "ico"
}, {
  "id": "ir",
  "name": "Répéteurs",
  "marques": "ico"
}, {
  "id": "vm",
  "name": "Mobiles",
  "marques": "ver"
}, {
  "id": "vp",
  "name": "Portatifs",
  "marques": "ver"
}, {
  "id": "vr",
  "name": "Répéteurs",
  "marques": "ver"
}, {
  "id": "hm",
  "name": "Mobiles",
  "marques": "hyt"
}, {
  "id": "hp",
  "name": "Portatifs",
  "marques": "hyt"
}, {
  "id": "hr",
  "name": "Répéteurs",
  "marques": "hyt"
}];
var modeles = [{
    "id": "cdm1250",
    "name": "CDM 1250",
    "types": "mm"
  },
  {
    "id": "cm200",
    "name": "CM 200",
    "types": "mm"
  }, {
    "id": "cm200d",
    "name": "CM 200d",
    "types": "mm"
  }, {
    "id": "m1225",
    "name": "M 1225",
    "types": "mm"
  }, {
    "id": "xpr6300",
    "name": "XPR 6300",
    "types": "mp"
  }, {
    "id": "xpr6550",
    "name": "XPR 6550",
    "types": "mp"
  }, {
    "id": "xpr6580",
    "name": "XPR 6580",
    "types": "mp"
  }, {
    "id": "xpr7580",
    "name": "XPR 7580",
    "types": "mp"
  }, {
    "id": "dtr600",
    "name": "DTR 600",
    "types": "mp"
  }, {
    "id": "dtr650",
    "name": "DTR 650",
    "types": "mp"
  }, {
    "id": "dtr700",
    "name": "DTR 700",
    "types": "mp"
  }, {
    "id": "rmu",
    "name": "RMU",
    "types": "mp"
  }, {
    "id": "xpr8400",
    "name": "XPR 8400",
    "types": "mr"
  }, {
    "id": "nx700",
    "name": "NX 700",
    "types": "km"
  }, {
    "id": "nx720",
    "name": "NX 720",
    "types": "km"
  }, {
    "id": "nx3720",
    "name": "NX 3720",
    "types": "km"
  }, {
    "id": "nx3820",
    "name": "NX 3820",
    "types": "km"
  }, {
    "id": "tk880h3",
    "name": "TK 880 H-3",
    "types": "km"
  }, {
    "id": "tk8302h2",
    "name": "TK 8302 H-2",
    "types": "km"
  }, {
    "id": "nx340",
    "name": "NX 340",
    "types": "kp"
  }, {
    "id": "tk3202",
    "name": "TK 3202",
    "types": "kp"
  }, {
    "id": "tk3302",
    "name": "TK 3302",
    "types": "kp"
  }, {
    "id": "tk3402",
    "name": "TK 3402",
    "types": "kp"
  }, {
    "id": "bd502",
    "name": "BD 502",
    "types": "hp"
  }, {
    "id": "bd502i",
    "name": "BD 502i",
    "types": "hp"
  }
];

il serait surement plus rapide de saisir tes données directement sous ce format.
Attention si la taille totale des tes données est conséquente tu aurais peut-être meilleur compte de passer par un BdD

modèle du radio = 1 type de câble + 1 type de programme + 1 image de la façade du radio

Dans ce cas, effectivement, il n'est pas indispensable de passer par des <select> et tu pourrais faire un affichage direct.

**psychadelic** · 11/04/2019, 03h05

Bon, j'ai un peu codé...

tout d'abord pour les données:
comme j'étais pas trop chaud pour tout re-saisir depuis https://codepen.io/niighthawk/pen/jRMYQz

j'ai fait un pgm pour transformer les valeurs dans mon format :

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>prepa</title>
  <style>
    body {
      font-family: 'Courier New', Courier, monospace;
      font-size: 10px;
      /*white-space: pre;  ok pour l'affichage, pas ok pour le copier coller */
    }
  </style>
</head>
 
<body>
const Content_Sets = {<br>
<script>
  const FirstKey = '0-marques'
  var
    LignePrepa = "",
    KeyIn      = FirstKey,
    nb_Lignes  = 0,
    FirstSpaces = '&nbsp;&nbsp;'  // du coup pour que le copier coller ait des espaces à se mettre sous la dent ...
  ;
  function DoLine(v1, v2, key)
  {
    if (KeyIn != key ) 
    {
      LignePrepa = LignePrepa.substring(0,(LignePrepa.length -2))+ " ],<br>";
      document.write(FirstSpaces+LignePrepa);
      LignePrepa = "";
      nb_Lignes++;
    }
    KeyIn = key;
 
    if (LignePrepa==="")
    {
      let lib = `'${key}'`;
      LignePrepa = lib + '&nbsp;'.repeat(14 - key.length )+ " : [ ";
    }
    LignePrepa += `['${v1}','${v2}'], `;
  }
 
  function FinishLignes() {
    LignePrepa = LignePrepa.substring(0,(LignePrepa.length -2))+ " ]<br>  };<br> <br> ";
    document.write(FirstSpaces+LignePrepa);
    LignePrepa = "";
    nb_Lignes++;
  }
 
  function createMarques(name, id)             { DoLine(name, id, FirstKey )         }
  function createTypes(name, id, marques)      { DoLine(name, id, `1-${marques}`)    }
  function createModeles(name, id, types)      { DoLine(name, id, `2-${types}`)      }
  function createCables(name, id, modeles)     { DoLine(name, id, `3-${modeles}`)    }
  function createProgrammes(name, id, cables)  { DoLine(name, id, `4-${cables}`)     }
  function createFacades(name, id, programmes) { DoLine(name, id, `5-${programmes}`) }
 
 
  document.open();
 
  ProcessAllLines()
 
  FinishLignes();   
 
  document.write(` // -- >  ${nb_Lignes}  lignes ...`);
 
  document.close();
 
 
function ProcessAllLines() {
 
  var marques = [
  createMarques('Motorola', 'moto'),
  createMarques('Kenwood', 'ken'),
  createMarques('Icom', 'ico'),
  createMarques('Vertex', 'ver'),
  createMarques('Hytera', 'hyt'),
  ];
 
 
  var types = [
  /**MOTOROLA **/
    createTypes('Mobiles', 'mm', 'moto'),
    createTypes('Portatifs', 'mp', 'moto') // etc....
  ];
}
  </script>
</body>
</html>

ce qui au final donne un fichier js que j'ai choisi d'appeler : selects_vals.js

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
const Content_Sets = {
  '0-marques'      : [ ['Motorola','moto'], ['Kenwood','ken'], ['Icom','ico'], ['Vertex','ver'], ['Hytera','hyt'] ],
  '1-moto'         : [ ['Mobiles','mm'], ['Portatifs','mp'], ['Répéteurs','mr'], ['Micro','mmic'] ],
  '1-ken'          : [ ['Mobiles','km'], ['Portatifs','kp'], ['Répéteurs','kr'], ['Micro','kmic'] ],
  '1-ico'          : [ ['Mobiles','im'], ['Portatifs','ip'], ['Répéteurs','ir'] ],
  '1-ver'          : [ ['Mobiles','vm'], ['Portatifs','vp'], ['Répéteurs','vr'] ],
  '1-hyt'          : [ ['Mobiles','hm'], ['Portatifs','hp'], ['Répéteurs','hr'] ],
  '2-mm'           : [ ['CDM 1250','cdm1250'], ['CM 200','cm200'], ['CM 200d','cm200d'], ['M 1225','m1225'] ],
  '2-mp'           : [ ['XPR 6300','xpr6300'], ['XPR 6550','xpr6550'], ['XPR 6580','xpr6580'], ['XPR 7580','xpr7580'], ['DTR 600','dtr600'], ['DTR 650','dtr650'], ['DTR 700','dtr700'], ['RMU','rmu'] ],
  '2-mr'           : [ ['XPR 8400','xpr8400'] ],
  '2-km'           : [ ['NX 700','nx700'], ['NX 720','nx720'], ['NX 3720','nx3720'], ['NX 3820','nx3820'], ['TK 880 H-3','tk880h3'], ['TK 8302 H-2','tk8302h2'] ],
  '2-kp'           : [ ['NX 340','nx340'], ['TK 3202','tk3202'], ['TK 3302','tk3302'], ['TK 3402','tk3402'] ],
  '2-hp'           : [ ['BD 502','bd502'], ['BD 502i','bd502i'] ],
  '3-cdm1250'      : [ ['TAN 4083','tan40831'] ],
  '3-cm200'        : [ ['CÂBLE PIEUVRE ( EMMAN )','pieuvre1'] ],
  '3-cm200d'       : [ ['M-PMKN 4147A','mp4147a1'] ],
  '3-m1225'        : [ ['TAN - M4083 ( EMMAN )','tanm40831'] ],
  '3-xpr6300'      : [ ['PMKN 4012B','p4012b1'] ],
  '3-xpr6550'      : [ ['PMKN 4012B','p4012b2'] ],
  '3-xpr6580'      : [ ['PMKN 4012B','p4012b3'] ],
  '3-xpr7580'      : [ ['PMKN 4012B','p4012b4'] ],
  '3-dtr600'       : [ ['HKKN 4027A','h4027a1'] ],
  '3-dtr650'       : [ ['0105950U15','0105950U151'] ],
  '3-dtr700'       : [ ['HKKN 4027A','h4027a2'] ],
  '3-rmu'          : [ ['HKKN 4027A','h4027a3'] ],
  '3-xpr8400'      : [ ['PMKN 4010B','p4010b1'] ],
  '3-nx700'        : [ ['KPG-46U','k46u1'] ],
  '3-nx720'        : [ ['TAN KM46','tkm461'] ],
  '3-nx3720'       : [ ['KPG-46U','k46u2'] ],
  '3-nx3820'       : [ ['KPG-46U','k46u3'] ],
  '3-tk880h3'      : [ ['TAN KM46','tkm462'] ],
  '3-tk8302h2'     : [ ['KPG-53U','k53u1'] ],
  '3-nx340'        : [ ['KPG-22U','k22u1'] ],
  '3-tk3202'       : [ ['KPG-22U','k22u2'] ],
  '3-tk3302'       : [ ['KPG-22U','k22u3'] ],
  '3-tk3402'       : [ ['KPG-22U','k22u4'] ],
  '3-bd502'        : [ ['Programmeur PC76 Serie BD5 / PD4 ( switch CPS )','pc761'] ],
  '3-bd502i'       : [ ['Programmeur PC76 Serie BD5 / PD4 ( switch CPS )','pc762'] ],
  '4-tan40831'     : [ ['Professional Series CPS','pscps1'] ],
  '4-pieuvre1'     : [ ['Commercial Series CPS','cscps1'] ],
  '4-mp4147a1'     : [ ['MOTOTRBO CPS','mcps1'] ],
  '4-tanm40831'    : [ ['Radius 1225 Series RSS','r1225srss1'] ],
  '4-p4012b1'      : [ ['MOTOTRBO CPS','mcps2'] ],
  '4-p4012b2'      : [ ['MOTOTRBO CPS','mcps3'] ],
  '4-p4012b3'      : [ ['MOTOTRBO CPS','mcps4'] ],
  '4-p4012b4'      : [ ['MOTOTRBO CPS','mcps5'] ],
  '4-h4027a1'      : [ ['Business Radio CPS','brcps1'] ],
  '4-0105950U151'  : [ ['DTR CPS','dcps1'] ],
  '4-h4027a2'      : [ ['Business Radio CPS','brcps2'] ],
  '4-h4027a3'      : [ ['Business Radio CPS','brcps3'] ],
  '4-p4010b1'      : [ ['MOTOTRBO CPS','mcps6'] ],
  '4-k46u1'        : [ ['KPG-111D','k111d1'] ],
  '4-tkm461'       : [ ['KPG-124D','k124d1'] ],
  '4-k46u2'        : [ ['KPG-D3','kd31'] ],
  '4-k46u3'        : [ ['KPG-D3','kd32'] ],
  '4-tkm462'       : [ ['KPG-49D','k49d1'] ],
  '4-k53u1'        : [ ['KPG-46/46A','k46a1'] ],
  '4-k22u1'        : [ ['KPG-169D','k169d1'] ],
  '4-k22u2'        : [ ['KPG-87D','k87d1'] ],
  '4-k22u3'        : [ ['KPG-119D','k119d1'] ],
  '4-k22u4'        : [ ['KPG-158D','k158d1'] ],
  '4-pc761'        : [ ['BD3xx_BD5xx_Series_CPS','bd51'] ],
  '4-pc762'        : [ ['BD3xxi_BD5xxi_Series_CPS US','bd5i1'] ],
  '5-pscps1'       : [ ['Facade','r/m/m/cdm1250.jpg'] ],
  '5-cscps1'       : [ ['Facade','r/m/m/cm200.jpg'] ],
  '5-mcps1'        : [ ['Facade','r/m/m/cm200d.jpg'] ],
  '5-r1225srss1'   : [ ['Facade','r/m/m/m1225.jpg'] ],
  '5-mcps2'        : [ ['Facade','r/m/p/xpr6300.jpg'] ],
  '5-mcps3'        : [ ['Facade','r/m/p/xpr6550.jpg"'] ],
  '5-mcps4'        : [ ['Facade','r/m/p/xpr6580.jpg'] ],
  '5-mcps5'        : [ ['Facade','r/m/p/xpr7580.jpg'] ],
  '5-brcps1'       : [ ['Facade','r/m/p/dtr600.jpg'] ],
  '5-dcps1'        : [ ['Facade','r/m/p/dtr650.jpg'] ],
  '5-brcps2'       : [ ['Facade','r/m/p/dtr700.jpg'] ],
  '5-brcps3'       : [ ['Facade','r/m/p/rmu.jpg'] ],
  '5-mcps6'        : [ ['Facade','r/m/r/xpr8400.jpg'] ],
  '5-k111d1'       : [ ['Facade','r/k/m/nx700.jpg'] ],
  '5-k124d1'       : [ ['Facade','r/k/m/nx720.jpg'] ],
  '5-kd31'         : [ ['Facade','r/k/m/nx3720.jpg'] ],
  '5-kd32'         : [ ['Facade','r/k/m/nx3820.jpg'] ],
  '5-k49d1'        : [ ['Facade','r/k/m/tk880.jpg'] ],
  '5-k46a1'        : [ ['Facade','r/k/m/tk8302.jpg'] ],
  '5-k169d1'       : [ ['Facade','r/k/p/nx340.jpg'] ],
  '5-k87d1'        : [ ['Facade','r/k/p/tk3202.jpg'] ],
  '5-k119d1'       : [ ['Facade','r/k/p/tk3302.jpg'] ],
  '5-k158d1'       : [ ['Facade','r/k/p/tk3402.jpg'] ],
  '5-bd51'         : [ ['Facade','r/h/p/bd502.jpg'] ],
  '5-bd5i1'        : [ ['Facade','r/h/p/bd502i.jpg'] ]
};
 
// -- > 87 lignes ...

**psychadelic** · 11/04/2019, 03h14

pour la partie cascade de selects j'ai un peu modifié mon code initial :

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>multi selects - v2</title>
</head>
<body>
  <h4>Choisissez :</h4>
  <select id="marques-select"    ><option disabled selected>--- Marques ---</option></select>  
  <select id="types-select"      ><option disabled selected>--- Types ---</option></select> 
  <select id="modeles-select"    ><option disabled selected>--- Modèles ---</option></select>  
  <select id="cables-select"     ><option disabled selected>--- Cables ---</option></select>  
  <select id="programmes-select" ><option disabled selected>--- Programmes ---</option></select> 
  <select id="facades-select"    ><option disabled selected>--- Facades ---</option></select> 
 
  <script type='text/javascript' src="selects_vals.js"></script>
  <script>
    const
      Base_Sel = [
          { DOMelm : document.querySelector('#marques-select'),    action :1  }  //=>n°0 , action = n° du select impacté 
        , { DOMelm : document.querySelector('#types-select'),      action :2  }  //=>n°1
        , { DOMelm : document.querySelector('#modeles-select'),    action :3  }  //=>n°2  soit Base_Sel[2].DOMelm ou Base_Sel[2].action
        , { DOMelm : document.querySelector('#cables-select'),     action :4  }
        , { DOMelm : document.querySelector('#programmes-select'), action :5  }
        , { DOMelm : document.querySelector('#facades-select'),    action :-1 }  
      ],
    SelectZeroInit_Key = '0-marques';
    // Content_Sets = { ... -->  est dans le fichier selects_vals.js" 
 
    // initializzationne des selects...
    // - - - - - - - -  - - - - - - - - - - - -
    Base_Sel.forEach( (refBaseSel , NumSelect)=> {
      refBaseSel.DOMelm.dataset.refBase = NumSelect.toString();  // placement du n° de select en data sur l'élément,pour l'identifier dans Base_Sel
      refBaseSel.DOMelm.onchange        = SelectChanged;         // attribution de l'event listener (le même pour tous)
      refBaseSel.DOMelm.selectedIndex   = 0;                     // programation défensive
    })
    initOptions ( 0, SelectZeroInit_Key );                       // remplisage du 1er select
 
    // - - - - - - - -  - - - - - - - - - - - -
  
 
    function initOptions(BS_idx, SetRef )     // rempliseur de Select,    BS_idx = n° dans Base_Sel ( si ==  5 c'est les façades donc traitement différent...?
    {                                        //                          SetRef = valaeur de clé sur l'obj Content_Sets
      let 
        theSelect     = Base_Sel[BS_idx].DOMelm,     // pointeur sur le select consteré 
        NextSelect    = Base_Sel[BS_idx].action,     // cascade des choix sur les selects  ( si cible action ==  5 c'est les façades donc traitement différent...?
        NextSelectKey = ''
      ;
      for (let i=theSelect.options.length; --i;) { theSelect.remove(i) } //  vider la liste des options
 
      theSelect.selectedIndex = 0;                  // placement du select en tête
 
      if ( '' != SetRef )                         // si y a des valeurs d'options à remplir ?
      {
        if (SetRef in Content_Sets)
        {
          Content_Sets[SetRef].forEach( function(pair,item)   // boucle sur l'array de ses éléments. ex: Content_Sets['0-marques'...
          {
            theSelect[(item+1)] = new Option(pair[0],pair[1]); // une <option> de plus rangée à la bonne place
          })
 
          if ( 1 == Content_Sets[SetRef].length ) // sélection automatique si élément unique
          {
            theSelect.selectedIndex = 1;
            NextSelectKey = NextSelect + '-' + theSelect[1].value;
          }
        }
        else
        {
          alert(`:/ données manquantes dans selects_vals.js => (${SetRef})`); // gestion d'erreur pour jreaux62
        }
      }
      if (NextSelect > 0) { initOptions(NextSelect, NextSelectKey )}  // casacade des selects
    }
 
    function SelectChanged(e) {      // déclenché par un choix sur n'importe quel select
      let
        ref   = parseInt(this.dataset.refBase),   // ref = n° du select dans Base_Sel ( si ==  5 c'est les façades donc traitement différent...
        SelId = Base_Sel[ref].action
      ;
      initOptions(SelId, (SelId+'-'+this.value) );
    }
 
  </script>
</body>
</html>

vali vala toute la gestion de tous les selects se rêgle en juste 2 fonctions (la plus grande fait juste une trentaine de lignes espacées)

J'ai mis daiKommentaires, et j'ai aussi réglé le système de cascade pour les différents cas (s'il y a un élément unique, si on revient en arrière, ...)

j'ai aussi mis une alerte sur le débordement de Content_Sets[SetRef]

Le seul truc que j'ai pas fait c'est la gestion du dernier select qui déclenche l'affichage d'un visuel...

Si d'autres problèmes...

Invité · 11/04/2019, 08h37

Bonjour,

Envoyé par niighthawk

... les 3 dernières sont chaque fois associées à mon 3e select ( modèle du radio = 1 type de câble + 1 type de programme + 1 image de la façade du radio )...

Dans ce cas, il n'y a pas besoin de <select> pour les 3 derniers.

Le choix dans le 3e <select> détermine une et une seule valeur pour chacun des 3 derniers.
C'est juste une table relationnelle.

**NoSmoking** · 11/04/2019, 12h13

Envoyé par psychadelic

tout d'abord pour les données:
comme j'étais pas trop chaud pour tout re-saisir depuis ...

Dans le cas présent je ne suis pas vraiment « fan » de ce genre de structure, Array d'Array.
La structure type objet JSON m'apparait comme plus facile à mettre à jour, pour la maintenance ajout/suppression, et correspond plus à une structure de type table d'autant que la récupération de l'existant est rapidement réalisable via un JSON.stringify.

Envoyé par jreaux62

Dans ce cas, il n'y a pas besoin de <select> pour les 3 derniers.

Jérôme je suis bien d'accord avec toi, comme précisé, même si j'ai un presque doute sur les données « Façades », ne pourrait-il pas y en avoir plusieurs ou est ce simplement une photo de l'appareil ???

On reste très proche de la philosophie de réalisation ce que j'ai mis en lien.

Exemple de ce que cela pourrait donner, certaines fonctions pouvant être factorisées

Exemple : https://nosmoking.developpez.com/demos/js/d1961015.html
Données : https://nosmoking.developpez.com/dem...61015-datas.js

Invité · 11/04/2019, 13h18

Envoyé par niighthawk

...que 4 5 6 automatiquement affiche ce qui s'y trouve ( car il y a toujours juste 1 option )...

... les 3 dernières sont chaque fois associées à mon 3e select ( choix du modèle du radio = 1 SEUL type de câble + 1 SEUL type de programme + 1 SEULE image de la façade du radio )...

4 5 6 ne dépendent QUE du choix de 3
dès que 3 est choisi, 4 5 6 ne peuvent prendre qu'une seule valeur.

Donc, 4 5 6 n'ont pas besoin d'être dans des <select>, mais juste d'être affichés dès qu'on choisi 3.
CQFD.

**NoSmoking** · 11/04/2019, 13h54

Houlà ! Alzheimer me gagne d'autant que je l'ai lu et cité

L'affichage direct c'est d'ailleurs ce que je fais dans l'exemple donné.

La structure pourrait donc être simplifiée comme suit, les données « appartenant » au modèle

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
var Modeles = [{
  "id": "cdm1250",
  "name": "CDM 1250",
  "types": "mm",
  "cable": "TAN 4083",
  "programme": "Professional Series CPS",
  "facade": "r/m/m/cdm1250.jpg"
}, {
  "id": "cm200",
  "name": "CM 200",
  "types": "mm",
  "cable": "CÂBLE PIEUVRE ( EMMAN )",
  "programme": "Commercial Series CPS",
  "facade": "r/m/m/cm200.jpg"
}, {
  "id": "cm200d",
  "name": "CM 200d",
  "types": "mm",
  "cable": "M-PMKN 4147A",
  "programme": "MOTOTRBO CPS",
  "facade": "r/m/m/cm200d.jpg"
},
// la suite

**niighthawk** · 12/04/2019, 12h37

Envoyé par psychadelic

...

Merci

sa simplifie de beaucoup l'ensemble

et super pour les 3 dernières, sauf il y a une erreur à la ligne 32...

Base_Sel.forEach( (refBaseSel , NumSelect)=> {

**niighthawk** · 12/04/2019, 12h40

Envoyé par NoSmoking

Exemple de ce que cela pourrait donner, certaines fonctions pouvant être factorisées

Exemple : https://nosmoking.developpez.com/demos/js/d1961015.html
Données : https://nosmoking.developpez.com/dem...61015-datas.js

Wow c'est en plein comme ça je le visualisais à la base mais étant débutante j'arrivais pas à se résultat et encore mieux avec ton poste suivant ou tu combine toute l'information par modèle

ça aiderais tellement à réduire la base de donnée et l'entrée d'informations. il y aurait moyen de récupérer ta nouvelle manière de faire ?

Même que je n'ai pas besoin d'afficher L'information de l'image ( si on pouvais juste afficher l'image on éliminerais du code et plusieurs champs ?)
Nom : Capture.JPG
Affichages : 195
Taille : 56,5 Ko

Nom : Capture.JPG
Affichages : 195
Taille : 56,5 Ko

**NoSmoking** · 12/04/2019, 14h07

il y aurait moyen de récupérer ta nouvelle manière de faire ?

La version 2 est disponible

Exemple : https://nosmoking.developpez.com/dem...1961015-2.html
Données : https://nosmoking.developpez.com/dem...015-2-datas.js

( si on pouvais juste afficher l'image on éliminerais du code et plusieurs champs ?)

Regarde et analyse le code pour te rencontre compte que le gain est faible dès l'instant où tu disposes des informations.

**psychadelic** · 13/04/2019, 03h45

Envoyé par niighthawk

Merci

ça simplifie de beaucoup l'ensemble

et super pour les 3 dernières, sauf il y a une erreur à la ligne 32...

Base_Sel.forEach( (refBaseSel , NumSelect)=> {

??? comprend pas, j'ai essayé ce code dans tous les sens et je n'ai aucune erreur à l'horizon ???
Quel message d'erreur à tu ?

**niighthawk** · 13/04/2019, 13h59

@No smoking un gros merci, et un gros merci au autres aussi

wow c'est tellement plus simple rajouter des nouveaux modèles, tout est à la même place pas besoin de me souvenir du ID de l'un et de l'autre !!! gros bisous

Merci aussi à psychadelic

@psychadelic, l'erreur me disais ceci

Nom : Capture.JPG
Affichages : 301
Taille : 39,8 Ko

**psychadelic** · 13/04/2019, 15h09

Envoyé par niighthawk

@psychadelic, l'erreur me disais ceci Nom : Capture.JPG
Affichages : 301
Taille : 39,8 Ko

? vu ta copie d'écran, j'ai l'impression que cette "erreur" est "démasquée" par ton éditeur de texte (éclipse ?) et qu'il ignore les nouveaux codes syntaxiques de javascript version ES6.

Cette syntaxe est correcte à peu près partout, sauf peut être sur les anciennes versions des navigateurs ( j’espère que tu n'utilise pas Internet Explorer ).

A titre perso j'utilise Visual Studio Code, https://code.visualstudio.com/ , ce que je te conseille d'utiliser, et je teste principalement non code sur FireFox que je te conseille aussi d'utiliser.

Si tu dois être obligatoirement compatible avec une ancienne version de javascript, alors dans ce cas mon code ne fera pas l'affaire et il y aurait des choses à changer pour qu'il puisse être compatible.

Affichage listes liées

JavaScript

Discussions similaires

Partager

Partager