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 esta opção, essa função é acionada e começa a ser executada.
Você tem 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. Veja na captura de tela abaixo a aparência da lista suspensa-
Pontos importantes para criar uma lista suspensa
- A guia é usada com guia para criar a lista suspensa simples em HTML. Depois disso, o JavaScript ajuda a realizar a operação com esta lista.
- Fora isso, você pode usar a guia do contêiner para criar a lista suspensa. Adicione os itens suspensos e links dentro dele. Discutiremos cada método com um exemplo neste capítulo.
- Você pode usar qualquer elemento como, , ou
para abrir o menu suspenso.
Veja os exemplos abaixo para criar uma lista suspensa usando métodos diferentes.
tutorial javafx
Exemplos
Lista suspensa simples usando guia
É um exemplo simples de criação de uma lista suspensa simples e fácil, sem usar nenhum procedimento complicado. JavaScript código e folha de estilo CSS.
Copiar código
string.valorde java
dropdown menu using select tab function favTutorial() { var mylist = document.getElementById('myList'); document.getElementById('favourite').value = mylist.options[mylist.selectedIndex].text; } <b> Select you favourite tutorial site using dropdown list </b> ---Choose tutorial--- w3schools Javatpoint tutorialspoint geeksforgeeks <p> Your selected tutorial site is: <input type="text" id="favourite" size="20" < p> </p> Teste agora Saída
Ao executar o código acima, você obterá a mesma resposta da captura de tela fornecida. Ele conterá um menu suspenso com uma lista de sites de tutoriais.
Selecione um item da lista suspensa clicando nele.
polimorfismo java
Veja na imagem abaixo que o item selecionado foi exibido no campo de saída.
Uma lista suspensa pode ser criada de outras maneiras; veja mais alguns exemplos abaixo.
Lista suspensa usando botão e guia div
Neste exemplo, criaremos uma lista suspensa com um botão contendo uma lista de itens como um menu suspenso.
Copiar código
dropdown menu using button /* set the position of dropdown */ .dropdown { position: relative; display: inline-block; } /* set the size and position of button on web */ .button { padding: 10px 30px; font-size: 15px; } /* provide css to background of list items */ #list-items { display: none; position: absolute; background-color: white; min-width: 185px; } /* provide css to list items */ #list-items a { display: block; font-size: 18px; background-color: #ddd; color: black; text-decoration: none; padding: 10px; } //show and hide dropdown list item on button click function show_hide() { var click = document.getElementById('list-items'); if(click.style.display ==='none') { click.style.display ='block'; } else { click.style.display ='none'; } } Choose Language <a href="#"> Hindi </a> <a href="#"> English </a> <a href="#"> Spanish </a> <a href="#"> Chinese </a> <a href="#"> Japanese </a> Teste agora Saída
Ao clicar neste botão suspenso, você obterá uma lista de itens na qual deverá selecionar um item dessa lista. Veja a imagem abaixo:
genericidade em java
Clique no Lista suspensa botão e ocultar a lista.
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 C , C++ , PHP , MySQL , e Java , categorizado em diversas categorias. Quando o usuário clica em um botão suspenso específico, a respectiva lista suspensa será aberta para você.
Veja no exemplo abaixo como fazer:
.dropbtn { background-color: green; color: white; padding: 14px; font-size: 16px; cursor: pointer; } .dropbtn:hover { background-color: brown; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: white; min-width: 140px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover { background-color: #ddd; } .show { display: block; } <h2>List of tutorials using Dropdown menu</h2> <p>Click on the button to open the tutorial dropdown menu.</p> Programming <a href="#java">Java</a> <a href="#python">Python</a> <a href="#c++">C++</a> <a href="#c">C</a> Database <a href="#mysql">MySQL</a> <a href="#mdb">MongoDB</a> <a href="#cass">Cassandra</a> Web Technology <a href="#php">PHP</a> <a href="#css">CSS</a> <a href="#js">JavaScript</a> /* methods to hide and show the dropdown content */ function programmingList() { document.getElementById('myDropdown1').classList.toggle('show'); } function databaseList() { document.getElementById('myDropdown2').classList.toggle('show'); } function WebTechList() { document.getElementById('myDropdown3').classList.toggle('show'); } /* methods to redirect to tutorial page that user will select from dropdown list */ function java() { window.location.replace('https://www.javatpoint.com/java-tutorial'); } function python() { window.location.replace('https://www.javatpoint.com/python-tutorial'); } function cpp() { window.location.replace('https://www.javatpoint.com/cpp-tutorial'); } function c() { window.location.replace('https://www.javatpoint.com/c-programming-language-tutorial'); } function mysql() { window.location.replace('https://www.javatpoint.com/mysql-tutorial'); } function mDB() { window.location.replace('https://www.javatpoint.com/mongodb-tutorial'); } function cassandra() { window.location.replace('https://www.javatpoint.com/cassandra-tutorial'); } function php() { window.location.replace('https://www.javatpoint.com/php-tutorial'); } function css() { window.location.replace('https://www.javatpoint.com/css-tutorial'); } function js() { window.location.replace('https://www.javatpoint.com/javascript-tutorial'); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName('dropdown-content'); var i; for (i = 0; i <dropdowns.length; i++) { var opendropdown="dropdowns[i];" if (opendropdown.classlist.contains('show')) opendropdown.classlist.remove('show'); } < pre> <span> Test it Now </span> <p> <strong>Output</strong> </p> <p>On executing the above code, a form with three dropdown buttons will appear. Each dropdown button has a list of items.</p> <img src="//techcodeview.com/img/javascript-tutorial/55/how-create-dropdown-list-using-javascript-5.webp" alt="How to create dropdown list using JavaScript"> <p>Click on any of the dropdown button to see the list of items.</p> <img src="//techcodeview.com/img/javascript-tutorial/55/how-create-dropdown-list-using-javascript-6.webp" alt="How to create dropdown list using JavaScript"> <p>Let you click on MongoDB under database tutorial, it will redirect you to our javatpoint MongoDB tutorial . See the output below:</p> <img src="//techcodeview.com/img/javascript-tutorial/55/how-create-dropdown-list-using-javascript-7.webp" alt="How to create dropdown list using JavaScript"> <h4>Note: if you click outside the dropdown window, the dropdown list will be disappeared.</h4> <p>Usually, a dropdown menu is created to categories the items of the same type. Means the list of similar type of items. It is much similar to the tutorial website, which has several lists of our javatpoint subject tutorials.</p> <hr></dropdowns.length;>