Preden začnete ustvarjati spustni seznam, je pomembno vedeti, kaj je spustni seznam. Spustni seznam je preklopni meni, ki uporabniku omogoča izbiro ene možnosti izmed več. Možnosti na tem seznamu so definirane v kodiranju, ki je povezano s funkcijo. Ko kliknete ali izberete to možnost, se ta funkcija sproži in začne delovati.
Na obrazcih za registracijo ste večino časa videli spustni seznam za izbiro države ali mesta iz spustnega menija. Spustni seznam nam omogoča, da iz seznama elementov izberemo samo enega. Oglejte si spodnji posnetek zaslona, kako izgleda spustni seznam -
html oznake
Pomembne točke za ustvarjanje spustnega seznama
- Zavihek se uporablja z zavihkom za ustvarjanje preprostega spustnega seznama v HTML. Nato JavaScript pomaga izvajati operacije s tem seznamom.
- Razen tega lahko uporabite zavihek vsebnika za ustvarjanje spustnega seznama. V njem dodajte spustne elemente in povezave. V tem poglavju bomo obravnavali vsako metodo s primerom.
- Uporabite lahko kateri koli element, kot je, , oz
da odprete spustni meni.
Oglejte si spodnje primere za ustvarjanje spustnega seznama z različnimi metodami.
Primeri
Preprost spustni seznam z zavihkom
To je preprost primer ustvarjanja preprostega in enostavnega spustnega seznama brez uporabe zapletenega JavaScript kodo in slogovno datoteko CSS.
Kopiraj kodo
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> Preizkusite zdaj Izhod
npr. uporabniško ime
Če zaženete zgornjo kodo, boste prejeli enak odgovor kot podani posnetek zaslona. Vseboval bo spustni meni s seznamom spletnih mest z vadnicami.
S klikom na spustni seznam izberite en element.
Na spodnjem posnetku zaslona si oglejte, da je bil izbrani element prikazan v izpisnem polju.
Spustni seznam lahko ustvarite na druge načine; glejte še nekaj spodnjih primerov.
pisanje json v datoteko python
Spustni seznam z gumbom in zavihkom div
V tem primeru bomo ustvarili spustni seznam z gumbom, ki ima v spustnem meniju seznam elementov.
Kopiraj kodo
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> Preizkusite zdaj Izhod
S klikom na ta spustni gumb se prikaže seznam elementov, v katerem morate izbrati en element s tega seznama. Oglejte si spodnji posnetek zaslona:
Kliknite na Spustni seznam in skrijte seznam.
prolog jezik
Primer več spustnih seznamov
V zgornjih primerih smo ustvarili en spustni seznam. Zdaj bomo ustvarili obrazec z več spustnimi meniji različnih spletnih seznamov tehničnih predmetov, kot je C , C++ , PHP , MySQL , in Java , razvrščenih v več kategorij. Ko uporabnik klikne na določen spustni gumb, se vam odpre njegov spustni seznam.
Oglejte si spodnji primer, kako to storiti:
.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;>