Completar menús desplegables según la selección

Al desarrollar formularios con varios menús desplegables, puede resultar beneficioso completar las opciones en un menú desplegable según el selección realizada en otro. Esto permite una experiencia más fácil de usar al reducir las opciones y hacer que la entrada de datos sea más eficiente.

Un enfoque para lograr esta funcionalidad implica el uso de JavaScript para actualizar dinámicamente el contenido del menú desplegable dependiente. Aquí hay un ejemplo que demuestra cómo completar un menú desplegable (B) según la selección en otro (A):

function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i 
Esta función de JavaScript toma dos parámetros, ddl1 y ddl2, que representan los dos menús desplegables. Primero inicializa las matrices con las opciones que se mostrarán en cada menú desplegable.
A continuación, se utiliza una instrucción de cambio para manejar la selección realizada en ddl1. Dependiendo del valor de ddl1, borra las opciones en ddl2 y lo completa con las opciones apropiadas. La función createOption se utiliza para crear y agregar cada opción a ddl2.
En el HTML, se deben definir dos menús desplegables:

  
  Colours
  Shapes
  Names



Cuando el usuario selecciona una opción en ddl1, el evento onchange activa la función configureDropDownLists, que actualiza las opciones en ddl2 en consecuencia. Este enfoque proporciona una manera conveniente de completar un menú desplegable basándose en la selección de otro, mejorando la usabilidad de los formularios.