Preencher um menu suspenso com base na seleção de outro usando JavaScript

Quando confrontado com a tarefa de atualizar dinamicamente as opções em um menu suspenso com base na seleção feita em outro, é essencial para evitar complexidades desnecessárias, como consultas ao banco de dados. Vamos explorar uma solução simples baseada em JavaScript que faz isso sem a necessidade de chamadas AJAX.

Para ilustrar essa abordagem, considere um cenário em que você tem duas listas suspensas: Suspensa A com opções como "Cores", " Formas" e "Nomes" e menu suspenso B. Queremos preencher as opções no menu suspenso B com base na seleção feita no menu suspenso A.

Código de exemplo

O A seguinte função JavaScript demonstra como obter essa funcionalidade:

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 
Marcação HTML
A seguinte marcação HTML inclui duas listas suspensas:
ColoursShapesNames
Uso
Para usar esta funcionalidade, basta chamar a função configureDropDownLists, passando o primeiro menu suspenso (ddl1) e o segundo menu suspenso (ddl2) como argumentos. A função lidará com o preenchimento dinâmico do menu suspenso B com base na seleção feita no menu suspenso A.
Este trecho de código demonstra uma solução funcional completa, permitindo preencher dinamicamente um menu suspenso com base na seleção feita em outro usando JavaScript , sem a necessidade de chamadas de banco de dados ou solicitações AJAX.