Como criar uma lista suspensa usando JavaScript?

HTML e CSS são usados ​​para criar páginas da Web impressionantes, mas quando o JavaScript é usado em combinação, o resultado é absolutamente fenomenal. Uma coisa muito legal sobre uma página da web são suas listas suspensas. Agora, existem muitas estruturas disponíveis na Internet que permitem ao usuário usar listas suspensas pré-construídas, mas sabendo que os fundamentos são importantes. Este artigo demonstrará como criar uma lista suspensa básica com a ajuda de HTML, CSS e JavaScript.

Etapa 1: Configure o documento HTML

Comece criando um documento HTML e colocando as seguintes linhas dentro do arquivo HTML:

Escolha o carro


Porsche
Mercedes
BMW
Audi
Bugatti

Vamos explicar o que está acontecendo aqui:

• Um pai é criado com o id = “ddsection”, Mais tarde, esta div será usada para alinhar seus elementos filhos em linha com isso
• Um botão é criado que chama o ButtonClicked () método após clique. Este botão será usado para mostrar a lista suspensa.
• Depois disso, outra div é criada com o ID "Carmakes", que vai armazenar um monte de opções dentro dele. Esta div funcionará como um contêiner para o Tags colocadas dentro dele.

A execução do documento HTML fornece a seguinte saída para o navegador:

Como é visível na saída, os itens da lista suspensa não estão no local correto. Eles deveriam ser:

• Escondido até o botão ser clicado
• Verticalmente alinhado com o botão, pois é uma lista "suspensa"

Então, vamos consertar isso na próxima etapa

Etapa 2: Corrigindo os itens da lista suspensa com CSS

Para começar, defina a propriedade dos pais (cujo id é ddsection) exibir uma propriedade para “Block inline”, também estabeleceu sua posição para "relativo":

#ddSection
Posição: relativa;
Exibição: bloco embutido;

Depois disso, adicione algum estilo ao botão:

#botão
preenchimento: 10px 30px;
Size da fonte: 15px;

Estilo o contêiner para os itens da lista e defina seu mostrar propriedade para "nenhum" para que esteja oculto no início:

#carmakes
Mostrar nenhum;
largura de min: 185px;

E finalmente, estilize os itens da lista e defina sua propriedade de exibição como "nenhum", Então eles também estão escondidos no início:

#carmakes a
exibição: bloco;
Background-Color: RGB (181, 196, 196);
preenchimento: 20px;
cor preta;
Decoração de texto: Nenhum;

O código CSS completo para esta demonstração:

#ddSection
Posição: relativa;
Exibição: bloco embutido;

#botão
preenchimento: 10px 30px;
Size da fonte: 15px;

#carmakes
Mostrar nenhum;
largura de min: 185px;

#carmakes a
exibição: bloco;
Background-Color: RGB (181, 196, 196);
preenchimento: 20px;
cor preta;
Decoração de texto: Nenhum;

A execução do HTML agora criará a seguinte saída no navegador:

Os itens da lista estão agora ocultos, tudo o que resta a fazer é alternar sua propriedade de exibição após o pressionar o botão. Vamos fazer isso no próximo passo.

Etapa 3: alternando a propriedade de exibição com javascript

No arquivo JavaScript, comece criando a função ButtonClicked (), que será executado na pressão do botão:

função buttonClicked ()
// As próximas linhas de código pertencem aqui

Nesta função, obtenha a referência do Div com ID “Carmakes”, que é o contêiner para os itens da lista como:

var container = documento.getElementById ("Carmakes");

Depois disso, use o recipiente variável para mostrar e ocultar a lista suspensa com a ajuda da instrução if-else e a propriedade de exibição do Mages de carros div:

if (contêiner.estilo.display === "nenhum")
recipiente.estilo.display = "bloco";
outro
recipiente.estilo.display = "nenhum";

O código JavaScript completo para esta demonstração é como:

função buttonClicked ()
var container = documento.getElementById ("Carmakes");
if (contêiner.estilo.display === "nenhum")
recipiente.estilo.display = "bloco";
outro
recipiente.estilo.display = "nenhum";

Depois disso, basta executar o arquivo HTML em um navegador e clicar no botão para mostrar e ocultar a lista suspensa:

E a lista suspensa está funcionando perfeitamente bem.

Conclusão

A lista suspensa pode ser criada com uma combinação de HTML, CSS e JavaScript. As listas suspensas adicionam à estética da página da web. Para criar uma lista suspensa, crie os elementos necessários no arquivo HTML. No arquivo CSS, estilize os elementos e esconda -os usando seus mostrar propriedade. No arquivo JavaScript, alterne a propriedade Display Após o botão Clique. Neste artigo, a criação de uma lista suspensa foi explicada passo a passo.