Lier 2 SELECT ensemble sans BDD (avec un lien sur le deuxième SELECT)

Version imprimable

Bonjour, je voulais savoir si mon code est bon, parce que je n'arrive pas à lier 2 select entre eux sans BDD sachant que je voudrais rajouter un lien sur chaque option du deuxième Select :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
    <select id="select1" onchange="app_sel(this.value);" >
        <option value="1">Livres</option>
        <option value="2">Bande Dessiné</option>
        <option value="3">Manga</option>
    </select>
 
    <span id="select2">
        <select id="select21" style="display:inline;" onChange="location.href=''+this.options[this.selectedIndex].value+'.html';">
            <option value="page1">1</option>
            <option value="page2">2</option>
            <option value="page3">3</option>
        </select>
 
        <select id="select22" style="display:none;" onChange="location.href=''+this.options[this.selectedIndex].value+'.html';">
            <option value="page4">4</option>
            <option value="page5">5</option>
            <option value="page6">6</option>
        </select>
 
        <select id="select23" style="display:none;" onChange="location.href=''+this.options[this.selectedIndex].value+'.html';">
            <option value="page7">7</option>
            <option value="page8">8</option>
            <option value="page9">9</option>
        </select>
    </span>
 
 
    <script type="text/javascript">
        function app_sel(valeur) {
            var sels = document.getElementById("select2").getElementsByTagName("select");
            for(var i=0,l=sels.length;i&lt;l;i++) {
                sels.style.display = "none";
            }
            document.getElementById("select2"+valeur).style.display = "inline";
        }
    </script>

Merci

28/11/2018, 01h55
Watilin
Bonsoir,
le principal problème de ton script est que sels.style n’existe pas, et donc l’accès à la propriété sels.style.display lève une erreur. Utilise la console F12 pour voir les erreurs JavaScript et les messages affichés via console.log (la version plus moderne de alert).

Et sels.style n’existe pas car sels est une collection d’éléments, et non pas un élément seul. Il aurait fallu écrire sels[i].style.display. Mais tu peux réécrire ce passage avec une boucle for…of et un querySelectorAll :
Code:

1 2 3 for (let sel of document.querySelectorAll("#select2 select")) { sel.style.display = "none"; }
Petite remarque sur l’ergonomie de ton site : les gens ne s’attendent généralement pas à ce qu’une interaction avec un <select> provoque le chargement d’une nouvelle page. À ta place, je remplacerais les select par des bons vieux <a href="...">.

vu que personne n'a répondu..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title> Double Select </title>
<style>
  #select2 > select {
    display: none;
  }
  #select2 > select.affich {
    display:inline;
  }
</style>
</head>
<body >
  <select id="select1" >
    <option value="1" selected>Livres</option>
    <option value="2">Bande Dessiné</option>
    <option value="3">Manga</option>
  </select>
 
  <span id="select2">
    <select id="select21" onChange="f_autrePage(this.value)" class="affich">
      <option value="page1">1</option>
      <option value="page2">2</option>
      <option value="page3">3</option>
    </select>
 
    <select id="select22" onChange="f_autrePage(this.value)" >
      <option value="page4">4</option>
      <option value="page5">5</option>
      <option value="page6">6</option>
    </select>
    <select id="select23" onChange="f_autrePage(this.value)" >
      <option value="page7">7</option>
      <option value="page8">8</option>
      <option value="page9">9</option>
    </select>
  </span>
  <script>
  var
    Premier_Select = document.getElementById('select1'),
    All_Select_2   = document.querySelectorAll('#select2 > select ')
  ;
 
  Premier_Select.onchange = function(e) {
    let Nv_Select = 'select2'+ this.value;
    All_Select_2.forEach( function (Sel_elm) {
      Sel_elm.className = (Sel_elm.id == Nv_Select) ? 'affich' : '';
    });
  }
 
  function f_autrePage(theSlect) {
    location.href=theSlect+'.html'; 
  }
  </script>
</body>
</html>

Il existe bien sur milles autres manières de procéder, celle-ci etant sans doute la plus triviale, sans pour autant être la meilleur d'entre elles.
Tout dépend du degré de qualité attendue, au regard des besoins.