Ennen kuin aloitat avattavan luettelon luomisen, on tärkeää tietää, mikä on avattava luettelo. Pudotusvalikko on vaihdettava valikko, jonka avulla käyttäjä voi valita yhden vaihtoehdon useista. Tämän luettelon vaihtoehdot on määritelty koodauksessa, joka liittyy funktioon. Kun napsautat tai valitset tämän vaihtoehdon, toiminto käynnistyy ja alkaa toimia.
Olet nähnyt suurimman osan ajasta rekisteröintilomakkeissa avattavan luettelon, jossa voit valita osavaltion tai kaupungin alasvetovalikosta. Avattavasta luettelosta voimme valita vain yhden kohteiden luettelosta. Katso alla oleva kuvakaappaus, miltä avattava luettelo näyttää -
vastustaa jsonobject javaa
Tärkeitä ohjeita avattavan luettelon luomiseen
- Välilehteä käytetään välilehden kanssa yksinkertaisen HTML-pudotusluettelon luomiseen. Tämän jälkeen JavaScript auttaa suorittamaan toiminnon tämän luettelon kanssa.
- Tämän lisäksi voit käyttää säilövälilehteä avattavan luettelon luomiseen. Lisää pudotusvalikon kohteet ja linkit sen sisään. Käsittelemme jokaista menetelmää esimerkin avulla tässä luvussa.
- Voit käyttää mitä tahansa elementtiä, kuten , tai
avataksesi pudotusvalikon.
Katso alla olevat esimerkit avattavan luettelon luomiseksi eri menetelmillä.
Esimerkkejä
Yksinkertainen avattava luettelo välilehdellä
Se on yksinkertainen esimerkki yksinkertaisen ja helpon pudotusvalikon luomisesta ilman monimutkaista käyttöä JavaScript koodi ja CSS-tyylitaulukko.
gimp vaihtaa väriä
Kopioi koodi
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> Testaa nyt Lähtö
Suorittamalla yllä olevan koodin saat saman vastauksen kuin annettu kuvakaappaus. Se sisältää pudotusvalikon, jossa on luettelo opetusohjelmasivustoista.
Valitse yksi kohde avattavasta luettelosta napsauttamalla sitä.
Katso alla olevasta kuvakaappauksesta, että valittu kohde on näkynyt tuloskentässä.
Pudotusvalikko voidaan luoda muilla tavoilla; katso lisää esimerkkejä alla.
mb to gb
Pudotusvalikko painikkeella ja div-välilehdellä
Tässä esimerkissä luomme avattavan luettelon, jossa on painike, jossa on luettelo kohteista pudotusvalikkona.
Kopioi koodi
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> Testaa nyt Lähtö
python os -luettelohakemisto
Napsauttamalla tätä pudotusvalikkopainiketta saat luettelon kohteista, joista sinun on valittava yksi kohde luettelosta. Katso alla oleva kuvakaappaus:
Klikkaa Pudotusvalikosta -painiketta ja piilota luettelo.
Useita avattavia luetteloita Esimerkki
Yllä olevissa esimerkeissä olemme luoneet yhden avattavan luettelon. Luomme nyt lomakkeen, jossa on useita alasvetovalikkoja erilaisista online-teknisten aiheiden opetusohjelmien luetteloista, kuten C , C++ , PHP , MySQL , ja Java , luokiteltu useisiin luokkiin. Kun käyttäjä napsauttaa tiettyä pudotusvalikkopainiketta, hänen vastaava pudotusvalikko avautuu sinulle.
Katso alla oleva esimerkki, kuinka se tehdään:
.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;>