Preenchendo menus suspensos com base na seleção

Ao desenvolver formulários com vários menus suspensos, pode ser benéfico preencher as opções em um menu suspenso com base no seleção feita em outro. Isso permite uma experiência mais amigável, restringindo as opções e tornando a entrada de dados mais eficiente.

Uma abordagem para alcançar essa funcionalidade envolve o uso de JavaScript para atualizar dinamicamente o conteúdo do menu suspenso dependente. Aqui está um exemplo que demonstra como preencher um menu suspenso (B) com base na seleção em outro (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 função JavaScript usa dois parâmetros, ddl1 e ddl2, que representam os dois menus suspensos. Ele primeiro inicializa os arrays com as opções que serão exibidas em cada menu suspenso.
Em seguida, uma instrução switch é usada para lidar com a seleção feita em ddl1. Dependendo do valor de ddl1, ele limpa as opções em ddl2 e o preenche com as opções apropriadas. A função createOption é usada para criar e adicionar cada opção ao ddl2.
No HTML, dois menus suspensos devem ser definidos:

  
  Colours
  Shapes
  Names



Quando o usuário seleciona uma opção em ddl1, o evento onchange aciona a função configureDropDownLists, que atualiza as opções em ddl2 de acordo. Essa abordagem fornece uma maneira conveniente de preencher um menu suspenso com base na seleção de outro, melhorando a usabilidade dos formulários.