How to create: Cascading dropdown lists

Create three dropdown lists

Create three dropdown lists within the HTML form.

The second and third dropdown lists will display different options, depending on the value selected in the parent dropdown list.

First step - Add HTML:

<form name="form1" id="form1" action="/action_page.php">
  Subjects: <select name="subject" id="subject">
    <option value="" selected="selected">Select subject</option>
  </select>
  <br><br>
  Topics: <select name="topic" id="topic">
    <option value="" selected="selected">Please select subject first</option>
  </select>
  <br><br>
  Chapters: <select name="chapter" id="chapter">
    <option value="" selected="selected">Please select topic first</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Second step - Add JavaScript:

var subjectObject = {
  "Front-end": {
    "HTML": ["Links", "Images", "Tables", "Lists"],
    "CSS": ["Bordas", "Margens", "Fundos", "Float"]
    "JavaScript": ["Variáveis", "Operadores", "Funções", "Condições"]
  },
  "Back-end": {
    "PHP": ["Variáveis", "Cadeias", "Matrizes"],
    "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() {
    // Limpar os menus suspenso de 'Capítulos' e 'Tópicos'
    chapterSel.length = 1;
    topicSel.length = 1;
    // Mostrar valor correto
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    // Limpar o menu suspenso de 'Capítulos'
    chapterSel.length = 1;
    // Mostrar valor correto
    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]);
    }
  }
}

Experimente pessoalmente

Páginas relacionadas

Tutorial:Menu suspenso CSS

Tutorial:Como criar um menu suspenso passivo