Um problema simples de resolver, mas que ainda é comum em alguns sistemas web se encontra nos campos de select, onde há pouco dinamismo que facilite a vida do usuário. Certa vez estava em um site onde tive que selecionar minha faculdade em um campo de select, porém mesmo tendo selecionado minha cidade de origem o campo carregou todas as faculdades e universidades do país tornando assim a tarefa mais exaustiva.
Em contrapartida, existem formulários com campos de select que é gerado após uma determinada ação ser executada dentro do mesmo, muitas vezes em campos de estados onde dependendo do estado selecionado surge um novo campo select com as cidades específicas daquele estado. O método createElement em conjunto com o appendChild do Javascript conseguem criar novos elementos e atributos de inputs html dinamicamente no formulário e é o que vamos ver no exemplo à seguir:
Primeiramente criamos arrays para cada estado(Rio de Janeiro, Pará, São Paulo) e um vazio que receberá o array selecionado posteriormente, depois um elemento select é criado por meio do “document.createElement(“SELECT”)” e atribuído a uma variavél, crio mais um array vazio que receberá as cidades posteriormente em um laço de repetição. A condição if determina qual estado seleciona pelo usuário e atribui o array de cidades do estado em questão ao array vazio de cidades, após isso o laço é iniciado que irá até o limite de cidades existentes por meio do método “length”. O elemento de option é criado assim como o de select, é atribuído o nome da cidade para aquela posição específica do array, em seguida o elemento option é inserido dentro do select por meio do “appendChild” e por fim é adicionado a uma div “cidades” correspondente que se encontra no html também por meio do appendChild.
Augusto Programmer 