Cómo crear: Listas desplegables en cascada

Cree tres listas desplegables

Cree tres listas desplegables dentro del formulario HTML.

Las dos últimas listas desplegables mostrarán diferentes opciones, dependiendo del valor seleccionado en la lista desplegable principal.

Primer paso - Añadir HTML:

<form name="form1" id="form1" action="/action_page.php">
  Temas: <select name="subject" id="subject">
    <option value="" selected="selected">Seleccione el tema</option>
  </select>
  <br><br>
  Temas: <select name="topic" id="topic">
    <option value="" selected="selected">Por favor, seleccione el tema primero</option>
  </select>
  <br><br>
  Capítulos: <select name="chapter" id="chapter">
    <option value="" selected="selected">Por favor, seleccione el tema primero</option>
  </select>
  <br><br>
  <input type="submit" value="Enviar">
</form>

Segundo paso - Añadir JavaScript:

var subjectObject = {
  "Front-end": {
    "HTML": ["Enlaces", "Imágenes", "Tablas", "Listas"],
    "CSS": ["Bordes", "Márgenes", "Fondos", "Flotar"]
    "JavaScript": ["Variables", "Operadores", "Funciones", "Condiciones"]
  },
  "Back-end": {
    "PHP": ["Variables", "Cadenas", "Arreglos"],
    "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() {
    // Limpiar los menús desplegables de "Capítulos" y "Tema"
    chapterSel.length = 1;
    topicSel.length = 1;
    // Mostrar valor correcto
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    // Limpiar el menú desplegable de "Capítulos"
    chapterSel.length = 1;
    // Mostrar valor correcto
    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]);
    }
  }
}

Prueba personalmente

Páginas relacionadas

Tutoriales:menú desplegable de CSS

Tutoriales:¿Cómo crear: menú desplegable con悬停