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

**sido69** · 27/11/2018, 22h30

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

**Watilin** · 28/11/2018, 01h55

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

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

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

**psychadelic** · 28/11/2018, 03h45

vu que personne n'a répondu..

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

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

JavaScript

Discussions similaires

Partager

Partager