Abans de començar a crear una llista desplegable, és important saber què és una llista desplegable. Una llista desplegable és un menú alternable que permet a l'usuari triar una opció entre diverses. Les opcions d'aquesta llista es defineixen en la codificació, que està associada a una funció. Quan feu clic o trieu aquesta opció, aquesta funció s'activa i comença a funcionar.
Heu vist una llista desplegable la majoria del temps als formularis de registre per seleccionar l'estat o la ciutat al menú desplegable. Una llista desplegable ens permet triar només un de la llista d'elements. Vegeu la captura de pantalla següent com es veu la llista desplegable:
alisa manyonok
Punts importants per crear una llista desplegable
- La pestanya s'utilitza amb la pestanya per crear la llista desplegable senzilla en HTML. Després d'això, JavaScript ajuda a operar amb aquesta llista.
- A part d'això, podeu utilitzar la pestanya contenidor per crear la llista desplegable. Afegiu els elements desplegables i els enllaços dins d'ell. Analitzarem cada mètode amb un exemple en aquest capítol.
- Podeu utilitzar qualsevol element com ara , , o
per obrir el menú desplegable.
Vegeu els exemples següents per crear una llista desplegable amb diferents mètodes.
Exemples
Llista desplegable senzilla mitjançant la pestanya
És un exemple senzill de crear una llista desplegable senzilla i senzilla sense utilitzar cap tipus complicat JavaScript codi i full d'estil CSS.
nombre a cadena java
Copia el codi
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> Prova-ho ara Sortida
En executar el codi anterior, obtindreu la mateixa resposta que la captura de pantalla proporcionada. Contindrà un menú desplegable amb una llista de llocs de tutorials.
Seleccioneu un element de la llista desplegable fent-hi clic.
Vegeu a la captura de pantalla següent que l'element seleccionat s'ha mostrat al camp de sortida.
Es pot crear una llista desplegable utilitzant altres maneres; vegeu alguns exemples més a continuació.
rekha indi
Llista desplegable mitjançant el botó i la pestanya div
En aquest exemple, crearem una llista desplegable amb un botó amb una llista d'elements com a menú desplegable.
Copia el codi
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> Prova-ho ara Sortida
què és java hashmap
En fer clic en aquest botó desplegable, obtindreu una llista d'elements en què haureu de seleccionar un element d'aquesta llista. Vegeu la captura de pantalla a continuació:
Feu clic a Llista desplegable botó i amagar la llista.
Exemple de llista desplegable múltiple
En els exemples anteriors, hem creat una única llista desplegable. Ara crearem un formulari amb múltiples menús desplegables de diverses llistes de tutorials tècnics en línia com ara C , C++ , PHP , MySQL , i Java , categoritzat en diverses categories. Quan l'usuari faci clic en un botó desplegable concret, s'obrirà la seva llista desplegable corresponent.
Vegeu l'exemple següent com fer-ho:
.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;>