Før du begynder at oprette en dropdown-liste, er det vigtigt at vide, hvad der er en dropdown-liste. En dropdown-liste er en menu, der kan skiftes, og som giver brugeren mulighed for at vælge én mulighed blandt flere. Indstillingerne i denne liste er defineret i kodning, som er knyttet til en funktion. Når du klikker eller vælger denne mulighed, udløses denne funktion og begynder at udføre.
Du har set en rulleliste det meste af tiden på registreringsformularer for at vælge stat eller by fra rullemenuen. En dropdown-liste giver os mulighed for kun at vælge én fra listen over elementer. Se nedenstående skærmbillede, hvordan rullelisten ser ud-
powershell kommentar multiline
Vigtige punkter for at oprette en rulleliste
- Fanen bruges med faneblad til at oprette den simple dropdown-liste i HTML. Derefter hjælper JavaScript med at udføre operationen med denne liste.
- Bortset fra dette kan du bruge containerfanen til at oprette rullelisten. Tilføj rullemenuen og links i den. Vi vil diskutere hver metode med et eksempel i dette kapitel.
- Du kan bruge ethvert element som f.eks. , eller
for at åbne rullemenuen.
Se eksemplerne nedenfor for at oprette en rulleliste ved hjælp af forskellige metoder.
Eksempler
Simpel dropdown liste ved hjælp af fanen
Det er et simpelt eksempel på at skabe en enkel og nem dropdown-liste uden at bruge noget kompliceret JavaScript kode og CSS stylesheet.
Kopiér kode
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> Test det nu Produktion
Ved at køre ovenstående kode, vil du få svaret det samme som det givne skærmbillede. Det vil indeholde en rullemenu med en liste over tutorial-steder.
Vælg et element fra rullelisten ved at klikke på det.
np betyder
Se på nedenstående skærmbillede, at det valgte element er blevet vist i outputfeltet.
En dropdown-liste kan oprettes på andre måder; se nogle flere eksempler nedenfor.
Dropdown liste ved hjælp af knap og div fane
I dette eksempel vil vi oprette en rulleliste med en knap med en liste over elementer som en rullemenu.
Kopiér kode
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> Test det nu Produktion
Ved at klikke på denne dropdown-knap får du en liste over emner, hvor du skal vælge ét emne fra den liste. Se skærmbilledet nedenfor:
Klik på Dropdown liste knappen og skjul listen.
Flere rulleliste Eksempel
I ovenstående eksempler har vi lavet en enkelt rulleliste. Vi vil nu oprette en formular med flere dropdown-menuer med forskellige online tekniske vejledningslister som f.eks C , C++ , PHP , MySQL , og Java , kategoriseret i flere kategorier. Når brugeren klikker på en bestemt dropdown-knap, åbnes deres respektive dropdown-liste for dig.
hvordan man sorterer arraylist i java
Se nedenstående eksempel, hvordan du gør det:
.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;>