javascript Listes déroulantes HTML liées

[Mathieu]

bonjour à tout le monde.

je dois créer deux listes déroulantes HTML.
le choix effectué dans la première conditionne les choix dans la deuxième, le tout doit être géré par JavaScript.

donc voici mon code pour les listes

<select name="listA">
    <name>Jeux Olympiques</name>
    <label>Jeux Olympiques d'hiver ou d'été ?</label>
    <option valeur="hiver">Hiver</option>
    <option valeur="été">Été</option>
</select>

<select name="listB">
    <name>Sports</name>
    <label>Quels sports ?</label>
    <option valeur="athlétisme">Athlétisme</option>
    <option valeur="collectif">Sports collectifs été</option>
    <option valeur="combat">Sports de combats</option>
    <option valeur="natation">Natation</option>
    <option valeur="ski">Ski</option>
    <option valeur="collectif_h">Sports collectifs hiver</option>
    <option valeur="autres">Autres sports d'hiver</option>
</select>

c'est pour l'instant très basique et je suppose qu'il faut que je modifie aussi l'HTML mais avec le JavaScript c'est une autre histoire encore !
ci certains peuvent m'aider ce serait sympa.

merci à tout le monde.

 

[Jack]

Bonjour,

Je ne sais pas d'où tu tiens ce code mais ça semble être issue d'une traduction...
<option valeur=""> n'existe pas c'est <option value="">

Ensuite tu devrais attribuer un id à tes deux options de la première liste, id="hiver" et id="ete"
Utile par la suite pour les appeler en JS avec getElementById() par exemple...

<select name="listA">
    <name>Jeux Olympiques</name>
    <label>Jeux Olympiques d'hiver ou d'été ?</label>
    <option value="hiver" id="hiver">Hiver</option>
    <option value="été" id="ete">Été</option>
</select>

<script>
    let option1 = document.getElementByiD(hiver);
    let option2 = document.getElementByiD(ete); 
</script>

 

[Mathieu]

Merci, pourtant le code des listes je l'ai copié sur un site donc je pensais pas qu'il y avait des erreurs dessus.
Je ne comprends pas du tout le code JavaScript, je n'y connais rien, qu'est-ce que je dois faire exactement ?

Et puis comment concevoir la deuxième liste pour que ça fonctionne ? Merci

 

[Audrey]

Bonjour Mathieu,

Regarde du côté de l'attribut <optgroup> pour ta deuxième liste déroulante.

<optgroup> - HTML (HyperText Markup Language) | MDN

L'élément HTML <optgroup>, utilisé dans un formulaire, permet de créer un groupe d'options parmi lesquelles on peut choisir dans un élément <select>.

developer.mozilla.org

C'est quelque chose que tu peux faire facilement.
Concernant le JavaScript, tu dis que tu n'y connais rien et bien on est deux, mais d'autres vont se charger de t'aider.
A+

 

[Victorinox]

Mathieu, tu dois être capable de gérer tes deux listes déroulantes avec les infos de Jack et Audrey.
Une fois cela construit ce sera plus facile d'intégrer du JS avec les bons termes et ID que tu auras choisi.

Je regarde de mon côté pour le JS, dès que tu es prêt on regarde ensemble pour animer tes listes

 

[Mathieu]

<label for="sports">Choisissez le sport:</label>
<select id="sports">
    <optgroup label="été">
        <option>Athlétisme</option>
        <option>Sports collectifs</option>
        <option>Sports de combat</option>
        <option>Natation</option>
    </optgroup>
    <optgroup label="Hiver">
        <option>Ski</option>
        <option>Sports collectifs</option>
        <option>Autres sports</option>
    </optgroup>
</select>

Donc si j'ai bien compris, javascript va permettre de se positionner au bon endroit dans la deuxième liste déroulante.
Mais les <optgroup> ne peuvent pas être sélectionnés, on ne pourra pas indiquer dans la liste où l'on est par rapport au premier choix... Ou alors j'ai rien compris, ce qui m'étonnerait pas !!

 

[-Mathieu-]

Je me suis inscrit.

 

[L'occitan]

Je me suis inscrit.

Bonne idée, bienvenue alors !
Si tu souhaites comprendre un peu comment fonctionne une liste déroulante avec du JS je te recommande cette vidéo:

 

[Jean-Pierre]

La vidéo est bien mais ne permet pas de trouver la solution à cette question.
Je n'ai pas la réponse mais ça m'intéresse de comprendre comment ça pourrait se faire, si ça peut se faire d'ailleurs.

 

[Nicolas]

Je te propose ce code, que tu peux adapter à tes besoins

<form name="frm">
    <select size="3" name="sel1" id="sel1" onchange="gensel2();">
         <optgroup label="Jeux Olympiques">
              <option>JO HIVER</option>
              <option>JO ETE</option>
         </optgroup>
    </select>
    <select size="4" name="sel2" id="sel2">
         <optgroup label="Sports">
         </optgroup>
    </select>
</form>

var liste=new Array(
    new Array("Athlétisme","Sports collectifs","Sports de combat","Natation"),
    new Array("Ski","Sports collectifs","Autres sports")
);

function gensel2() {
    var s1=document.getElementById("sel1");
    var s2=document.getElementById("sel2");
        s2.length=0;
   for ( var n=0; n<liste[s1.selectedIndex].length; n++ ) {
        s2.length++;
        s2.options[s2.length-1].text=liste[s1.selectedIndex][n];
   }
}

Je pense que ça peut convenir, si tu veux modifier un peu n'hésite pas !
C'est du brut de décoffrage il n'y a pas de CSS.

 

[Nicolas]

 

[-Mathieu-]

Salut Nicolas, merci pour ce code.
On est vraiment pas loin du résultat final, est-ce que l'on peut faire que ce soit de vraies liste déroulantes ? Là ce sont des sortes de petits tableaux.
Je chipote un peu mais pour l'intégration sur le site ce serait beaucoup mieux.

Je vais essayer de mon côté mais bon vu mon faible niveau. Merci.

 

[Nicolas]

Supprime simplement les size="x" des deux <select>

 

[-Mathieu-]

C'est parfait, je vais intégrer ça demain et je vous dis.
Juste pour info, la façon dont le code javascript est présenté ça veut dire que je dois créer un fichier code.js et l'appeler dans le HTML c'est ça ?

Est-ce que je ne peux pas créer des balises <script> directement dans le index.html ? Je n'aurais je pense que ce javascript à faire tourner.
Comment intégrer ça ? Merci

 

[Victorinox]

Je l'écrirai comme ça

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var liste = new Array(
        new Array(
          "Athlétisme",
          "Sports collectifs",
          "Sports de combat",
          "Natation"
        ),
        new Array("Ski", "Sports collectifs", "Autres sports")
      );
    </script>
    <form name="frm">
      <select size="3" name="sel1" id="sel1" onchange="gensel2();">
        <optgroup label="Jeux Olympiques">
          <option>JO HIVER</option>
          <option>JO ETE</option>
        </optgroup>
      </select>
      <select size="4" name="sel2" id="sel2">
        <optgroup label="Sports"></optgroup>
      </select>
    </form>
    <script>
      function gensel2() {
        var s1 = document.getElementById("sel1");
        var s2 = document.getElementById("sel2");
        s2.length = 0;
        for (var n = 0; n < liste[s1.selectedIndex].length; n++) {
          s2.length++;
          s2.options[s2.length - 1].text = liste[s1.selectedIndex][n];
        }
      }
    </script>
  </body>
</html>

 

[Eleven Up]

Salut, le script avec la déclaration de variables placé au début du code ce n'est pas dû au hasard je suppose, ça fonctionnerait pas si il était placé juste avant le </body> comme le reste de la fonction ?

 

[Nicolas]

Tu peux mettre le script entier juste avant la balise </body> c'est même recommandé.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   
    <form name="frm">
      <select size="3" name="sel1" id="sel1" onchange="gensel2();">
        <optgroup label="Jeux Olympiques">
          <option>JO HIVER</option>
          <option>JO ETE</option>
        </optgroup>
      </select>
      <select size="4" name="sel2" id="sel2">
        <optgroup label="Sports"></optgroup>
      </select>
    </form>

    <script>
      var liste = new Array(
        new Array(
          "Athlétisme",
          "Sports collectifs",
          "Sports de combat",
          "Natation"
        ),
        new Array("Ski", "Sports collectifs", "Autres sports")
      );

      function gensel2() {
        var s1 = document.getElementById("sel1");
        var s2 = document.getElementById("sel2");
        s2.length = 0;
        for (var n = 0; n < liste[s1.selectedIndex].length; n++) {
          s2.length++;
          s2.options[s2.length - 1].text = liste[s1.selectedIndex][n];
        }
      }
    </script>
  </body>
</html>

 

[-Mathieu-]

Merci beaucoup, je vais mettre le script au bas du body donc.

 

[Cascadeur]

Personnellement je préfère le JS sur un fichier séparé : script.js par exemple puis appel du fichier dans le html juste avant </body>

<script type="text/javascript" src="script.js"></script>

Je trouve que c'est plus propre comme ça.

 

[Bertrand G]

Je trouve que c'est plus propre comme ça.

Comme le dit -Mathieu- ça dépend de la quantité de JS dans le code HTML.
Si il n'utilise que cette fonction sur toute sa page ça me semble pas mal d'utiliser le code de Nicolas avec le JS dans l'HTML.

Après sur de gros projets et beaucoup de code JS mieux vaut séparer et appeler dans le HTML.