|
Neste tutorial, veremos como criar uma lista suspensa em JavaScript.
Antes de come�ar a criar uma lista suspensa, � importante saber o que � uma lista suspensa. Uma lista suspensa � um menu
altern�vel que permite ao usu�rio escolher uma op��o entre v�rias. As op��es nesta lista s�o definidas na codifica��o, que est�
associada a uma fun��o. Quando voc� clica ou escolhe essa op��o, essa fun��o � acionada e come�a a ser executada.
Voc� j� deve ter visto uma lista suspensa na maioria das vezes nos formul�rios de registro para selecionar o estado ou
cidade no menu suspenso. Uma lista suspensa nos permite escolher apenas um da lista de itens.
Pontos importantes a considerar para criar uma lista suspensa:
A guia 'select' � usada com a guia 'option' para criar a lista suspensa simples em HTML. Depois disso, o JavaScript
ajuda a executar a opera��o com esta lista.
Fora isso, voc� pode usar a guia de cont�iner 'div' para criar a lista suspensa. Adicione os itens suspensos e links
dentro dele. Discutiremos cada m�todo com um exemplo neste tutorial.
Voc� pode usar qualquer elemento como 'button', 'a' ou 'p' para abrir o menu suspenso.
Veja os exemplos abaixo para criar uma lista suspensa usando m�todos diferentes.
Exemplos:
Lista suspensa simples usando a guia 'select':
� um exemplo para criar uma lista suspensa simples e f�cil, sem precisar usar nenhum c�digo JavaScript complicado e folha
de estilo CSS:
Veja na imagem abaixo o resultado desse c�digo::
Selecione um item da lista suspensa clicando nela, conforme mostra a imagem abaixo:
Ao selecionar um item da lista a op��o ser� impressa na caixa de texto. Confira na imagem abaixo:
Exemplo de lista suspensa m�ltipla:
Nos exemplos acima, criamos uma �nica lista suspensa. Agora, criaremos um formul�rio com v�rios menus suspensos de
v�rias listas de tutoriais de assuntos t�cnicos on-line, como:
App Inventor 2
JavaScript
Python
Categorizados em v�rias categorias. Quando o usu�rio clicar em um bot�o suspenso espec�fico, sua respectiva lista suspensa
ser� aberta e o usu�rio poder� escolher uma op��o.
Vejamos um exemplo de lista suspensa m�ltipla:
Veja na imagem abaixo o resultado desse c�digo:
Veja na imagem abaixo os menus suspensos quando os respectivos bot�es forem clicados:
<< Tutorial para Calcular a S�rie de Fibonacci
Tutorial para Criar Formul�rios >>
|
