Innan du börjar skapa en rullgardinslista är det viktigt att veta vad som är en rullgardinslista. En rullgardinslista är en växlingsbar meny som låter användaren välja ett alternativ bland flera. Alternativen i den här listan definieras i kodning, som är associerad med en funktion. När du klickar eller väljer det här alternativet utlöses den funktionen och börjar utföras.
Du har sett en rullgardinslista för det mesta på registreringsformulär för att välja stat eller stad från rullgardinsmenyn. En rullgardinslista låter oss bara välja en från listan med objekt. Se skärmdumpen nedan hur rullgardinsmenyn ser ut-
Viktiga punkter för att skapa en rullgardinslista
- Fliken används med tab för att skapa den enkla rullgardinsmenyn i HTML. Efter det hjälper JavaScript till att utföra operationen med den här listan.
- Förutom detta kan du använda behållarfliken för att skapa rullgardinsmenyn. Lägg till listrutorna och länkarna i den. Vi kommer att diskutera varje metod med ett exempel i detta kapitel.
- Du kan använda vilket element som helst som , , eller
för att öppna rullgardinsmenyn.
Se nedanstående exempel för att skapa en rullgardinslista med olika metoder.
Exempel
Enkel rullgardinslista med hjälp av tab
Det är ett enkelt exempel på att skapa en enkel och lätt rullgardinslista utan att använda någon komplicerad JavaScript kod och CSS-stilmall.
Kopiera kod
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> Testa det nu Produktion
Genom att köra ovanstående kod får du samma svar som den givna skärmdumpen. Den kommer att innehålla en rullgardinsmeny med en lista över tutorialsajter.
linux ändra katalognamn
Välj ett objekt från rullgardinsmenyn genom att klicka på det.
Se i skärmdumpen nedan att det valda objektet har visats i utdatafältet.
En rullgardinslista kan skapas på andra sätt; se några fler exempel nedan.
Nedrullningslista med knappen och div-fliken
I det här exemplet kommer vi att skapa en rullgardinslista med en knapp som har en lista med objekt som rullgardinsmeny.
bash if uttalande
Kopiera kod
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> Testa det nu Produktion
Genom att klicka på den här rullgardinsknappen får du en lista över objekt där du måste välja ett objekt från den listan. Se skärmdumpen nedan:
Klicka på Dropdown-lista knappen och dölj listan.
Flera rullgardinsmenyn Exempel
I exemplen ovan har vi skapat en enda rullgardinslista. Vi kommer nu att skapa ett formulär med flera rullgardinsmenyer med olika online tekniska ämneshandledningslistor som C , C++ , PHP , MySQL , och Java , kategoriserad i flera kategorier. När användaren klickar på en viss rullgardinsknapp öppnas deras respektive rullgardinslista för dig.
Se nedanstående exempel hur du gör:
.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;>