Comment créer : Liste déroulante en cascade

Créez trois listes déroulantes

Créez trois listes déroulantes dans le formulaire HTML.

Les deuxièmes et troisièmes listes déroulantes afficheront des options différentes, en fonction de la valeur sélectionnée dans la liste déroulante parente.

Première étape - Ajouter HTML :

<form name="form1" id="form1" action="/action_page.php">
  Sujets : <select name="subject" id="subject">
    <option value="" selected="selected">Sélectionnez le sujet</option>
  </select>
  <br><br>
  Thèmes : <select name="topic" id="topic">
    <option value="" selected="selected">Veuillez sélectionner le sujet en premier</option>
  </select>
  <br><br>
  Chapitres : <select name="chapter" id="chapter">
    <option value="" selected="selected">Veuillez sélectionner le sujet en premier</option>
  </select>
  <br><br>
  <input type="submit" value="Soumettre">
</form>

Deuxième étape - Ajouter JavaScript :

var subjectObject = {
  "Front-end": {
    "HTML": ["Liens", "Images", "Tableaux", "Listes"],
    "CSS": ["Bordures", "Marges", "Arrières-plans", "Flottants"]
    "JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
  },
  "Back-end": {
    "PHP": ["Variables", "Strings", "Arrays"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  var chapterSel = document.getElementById("chapter");
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    // Effacer les menus déroulants "Chapitre" et "Thème"
    chapterSel.length = 1;
    topicSel.length = 1;
    // Afficher la valeur correcte
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    // Effacer le menu déroulant "Chapitre"
    chapterSel.length = 1;
    // Afficher la valeur correcte
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }
}

Essayez-le personnellement

Page associée

Tutoriel :Menu déroulant CSS

Tutoriel :Comment créer un menu déroulant avec survol