Antes de comenzar a crear una lista desplegable, es importante saber qué es una lista desplegable. Una lista desplegable es un menú alternable que permite al usuario elegir una opción entre varias. Las opciones de esta lista se definen en la codificación, que está asociada a una función. Cuando hace clic o elige esta opción, esa función se activa y comienza a funcionar.
La mayor parte del tiempo ha visto una lista desplegable en los formularios de registro para seleccionar el estado o la ciudad en el menú desplegable. Una lista desplegable nos permite elegir solo uno de la lista de elementos. Vea la siguiente captura de pantalla de cómo se ve la lista desplegable:
Puntos importantes para crear una lista desplegable
- La pestaña se usa con la pestaña para crear la lista desplegable simple en HTML. Después de eso, JavaScript ayuda a realizar operaciones con esta lista.
- Aparte de esto, puede usar la pestaña contenedor para crear la lista desplegable. Agregue los elementos desplegables y los enlaces dentro de él. Discutiremos cada método con un ejemplo en este capítulo.
- Puedes utilizar cualquier elemento como, , o
para abrir el menú desplegable.
Consulte los ejemplos siguientes para crear una lista desplegable utilizando diferentes métodos.
script de carga de javascript
Ejemplos
Lista desplegable simple usando pestaña
Es un ejemplo sencillo de cómo crear una lista desplegable simple y fácil sin utilizar ningún tipo de complicado. javascript código y hoja de estilo CSS.
Copiar código
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> Pruébalo ahora Producción
Al ejecutar el código anterior, obtendrá la misma respuesta que la captura de pantalla proporcionada. Contendrá un menú desplegable con una lista de sitios de tutoriales.
bucle for en java
Seleccione un elemento de la lista desplegable haciendo clic en él.
búsqueda adversaria
Vea en la siguiente captura de pantalla que el elemento seleccionado se ha mostrado en el campo de salida.
Se puede crear una lista desplegable de otras formas; vea algunos ejemplos más a continuación.
Lista desplegable usando botón y pestaña div
En este ejemplo, crearemos una lista desplegable con un botón que tiene una lista de elementos como menú desplegable.
Copiar código
segmento de matriz java
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> Pruébalo ahora Producción
Al hacer clic en este botón desplegable, obtendrá una lista de elementos en los que deberá seleccionar un elemento de esa lista. Vea la captura de pantalla a continuación:
Clickea en el La lista desplegable y ocultar la lista.
Ejemplo de lista desplegable múltiple
En los ejemplos anteriores, hemos creado una única lista desplegable. Ahora crearemos un formulario con múltiples menús desplegables de varias listas de tutoriales de temas técnicos en línea como C , C++ , PHP , mysql , y Java , categorizados en varias categorías. Cuando el usuario hace clic en un botón desplegable en particular, se abrirá su respectiva lista desplegable.
Vea el siguiente ejemplo de cómo hacerlo:
.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;>