A legördülő lista létrehozásának megkezdése előtt fontos tudni, hogy mi az a legördülő lista. A legördülő lista egy átkapcsolható menü, amely lehetővé teszi a felhasználó számára, hogy több opció közül válasszon egyet. A listában szereplő opciók kódolásban vannak meghatározva, amely egy függvényhez van társítva. Ha rákattint vagy kiválasztja ezt a lehetőséget, a funkció aktiválódik, és elkezdi végrehajtani.
A regisztrációs űrlapokon legtöbbször egy legördülő lista látható, amelyből kiválaszthatja az államot vagy a várost a legördülő menüből. A legördülő lista lehetővé teszi, hogy csak egyet válasszunk a tételek listájából. Nézze meg az alábbi képernyőképet, hogyan néz ki a legördülő lista -
Fontos tudnivalók a legördülő lista létrehozásához
- A lapot a tabulátorral együtt használják az egyszerű legördülő lista létrehozásához HTML-ben. Ezután a JavaScript segít a művelet végrehajtásában ezzel a listával.
- Ettől eltekintve a tároló lap segítségével létrehozhatja a legördülő listát. Adja hozzá a legördülő elemeket és a benne található hivatkozásokat. Ebben a fejezetben az egyes módszereket egy példával tárgyaljuk.
- Bármilyen elemet használhat, pl. , vagy
a legördülő menü megnyitásához.
Tekintse meg az alábbi példákat egy legördülő lista különböző módszerekkel történő létrehozásához.
Példák
Egyszerű legördülő lista a fül használatával
Ez egy egyszerű példa egy egyszerű és könnyű legördülő lista létrehozására, anélkül, hogy bonyolult lenne JavaScript kódot és CSS-stíluslapot.
Kód másolása
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> Tesztelje most Kimenet
A fenti kód futtatásával ugyanazt a választ kapja, mint az adott képernyőképen. Tartalmaz egy legördülő menüt, amely tartalmazza az oktató webhelyek listáját.
Válasszon ki egy elemet a legördülő listából, ha rákattint.
Lásd az alábbi képernyőképen, hogy a kiválasztott elem megjelent a kimeneti mezőben.
A legördülő lista más módon is létrehozható; lásd még néhány példát alább.
Legördülő lista a gomb és a div fül segítségével
Ebben a példában egy legördülő listát fogunk létrehozni egy gombbal, amelynek legördülő menüje az elemek listája.
Kód másolása
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> Tesztelje most Kimenet
Erre a legördülő gombra kattintva megjelenik egy lista azokról a tételekről, amelyekben ki kell választania egy elemet a listából. Lásd az alábbi képernyőképet:
Kattintson a Legördülő lista gombot, és elrejti a listát.
Több legördülő lista Példa
A fenti példákban egyetlen legördülő listát hoztunk létre. Most létrehozunk egy űrlapot, amelyen több legördülő menü található különböző online műszaki tantárgyak listáival, például C , C++ , PHP , MySQL , és Jáva , több kategóriába sorolva. Amikor a felhasználó egy adott legördülő menü gombra kattint, megnyílik a megfelelő legördülő lista.
Tekintse meg az alábbi példát, hogyan kell csinálni:
.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;>