javascript Listes déroulantes HTML liées

  • Initiateur de la discussion Mathieu
  • Date de début
M

Mathieu

Invité
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
HTML
<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.
 
Solution
Je te propose ce code, que tu peux adapter à tes besoins
HTML du formulaire
<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>
JS du formulaire
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")...

Jack

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

HTML
<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>
 
Dernière édition:
M

Mathieu

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

Membre
Bonjour Mathieu,

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

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+
 
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 ;)
 
M

Mathieu

Invité
HTML
<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 !! 😱
 

Nicolas

Membre
Je te propose ce code, que tu peux adapter à tes besoins
HTML du formulaire
<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>
JS du formulaire
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.
 

-Mathieu-

Nouveau membre
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.
 

-Mathieu-

Nouveau membre
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
 
Je l'écrirai comme ça
HTML
<!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>
 

Nicolas

Membre
Tu peux mettre le script entier juste avant la balise </body> c'est même recommandé.
HTML
<!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>
 

Ces discussions pourraient vous intéresser...

Bonsoir, j'ai fait une recherche sur le forum et je crois que personne n'en a encore parlé, j'ai trouvé un site pas mal lorsque j'ai installé easyPHP (qui est maintenant Webserver) : KodeShot. Cela permet de créer des captures d'écrans d'extrait de code. Vous tapez votre code, vous...
Yo ! J'ai une div sans bordure remplie de cellules horizontales auxquelles j'applique une bordure sur le bord bas pour les séparer entre elles. Le problème c'est que la dernière je ne veux pas de bordure basse puisqu'il n'y a plus de cellule sous elle. Je n'ai pas la main sur le HTML...
Salut, Je suis en train de tester bootstrap sur mon localhost et j'ai un problème d'affichage. Je m'explique : Je veux afficher 4 colonnes qui contiennent chacune d'entre elles du texte mais j'ai beau chercher je ne comprends pas pourquoi elles s'affichent une au dessus des autres...
Haut