Før du begynner å lage en nedtrekksliste, er det viktig å vite hva som er en nedtrekksliste. En rullegardinliste er en vekslebar meny som lar brukeren velge ett alternativ fra flere. Alternativene i denne listen er definert i koding, som er knyttet til en funksjon. Når du klikker eller velger dette alternativet, utløses og begynner denne funksjonen.
Du har sett en rullegardinliste mesteparten av tiden på registreringsskjemaer for å velge stat eller by fra rullegardinmenyen. En rullegardinliste lar oss velge bare én fra listen over elementer. Se skjermbildet nedenfor hvordan rullegardinlisten ser ut-
character.compare java
Viktige punkter for å lage en nedtrekksliste
- Fanen brukes med tab for å lage den enkle rullegardinlisten i HTML. Etter det hjelper JavaScript å utføre operasjoner med denne listen.
- Annet enn dette kan du bruke beholderfanen til å lage rullegardinlisten. Legg til rullegardinelementene og koblingene i den. Vi vil diskutere hver metode med et eksempel i dette kapittelet.
- Du kan bruke hvilket som helst element som , , eller
for å åpne rullegardinmenyen.
Se eksemplene nedenfor for å lage en rullegardinliste ved hjelp av forskjellige metoder.
Eksempler
Enkel rullegardinliste ved hjelp av tab
Det er et enkelt eksempel på å lage en enkel og enkel rullegardinliste uten å bruke noe komplisert JavaScript kode og CSS-stilark.
Kopier 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 nå Produksjon
Ved å kjøre koden ovenfor, vil du få samme svar som det gitte skjermbildet. Den vil inneholde en rullegardinmeny med en liste over opplæringssteder.
Velg ett element fra rullegardinlisten ved å klikke på det.
10 ml til unser
Se i skjermbildet nedenfor at det valgte elementet har blitt vist i utdatafeltet.
En rullegardinliste kan opprettes på andre måter; se noen flere eksempler nedenfor.
Nedtrekksliste ved hjelp av knapp og div-fane
I dette eksemplet vil vi lage en rullegardinliste med en knapp som har en liste over elementer som en rullegardinmeny.
Kopier 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 nå Produksjon
Ved å klikke på denne rullegardinknappen får du opp en liste over elementer der du må velge ett element fra den listen. Se skjermbildet nedenfor:
Klikk på Nedtrekksliste knappen og skjule listen.
Eksempel på rullegardinliste for flere
I eksemplene ovenfor har vi laget en enkelt rullegardinliste. Vi vil nå lage et skjema med flere rullegardinmenyer med forskjellige online tekniske fagopplæringslister som C , C++ , PHP , MySQL , og Java , kategorisert i flere kategorier. Når brukeren klikker på en bestemt rullegardinknapp, åpnes deres respektive rullegardinliste for deg.
python chr funksjon
Se eksemplet nedenfor hvordan du gjø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;>