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.

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

Affichage listes liées

JavaScript

Vue hybride

Discussions similaires

Partager

Partager