Pred začatím vytvárania rozbaľovacieho zoznamu je dôležité vedieť, čo je rozbaľovací zoznam. Rozbaľovací zoznam je prepínateľná ponuka, ktorá umožňuje používateľovi vybrať si jednu z viacerých možností. Možnosti v tomto zozname sú definované v kódovaní, ktoré je spojené s funkciou. Keď kliknete alebo vyberiete túto možnosť, táto funkcia sa spustí a začne vykonávať.
Na registračných formulároch ste väčšinou videli rozbaľovací zoznam na výber štátu alebo mesta z rozbaľovacej ponuky. Rozbaľovací zoznam nám umožňuje vybrať len jeden zo zoznamu položiek. Pozrite si nižšie uvedenú snímku obrazovky, ako vyzerá rozbaľovací zoznam-
Dôležité body na vytvorenie rozbaľovacieho zoznamu
- Karta sa používa s tabom na vytvorenie jednoduchého rozbaľovacieho zoznamu v HTML. Potom JavaScript pomáha vykonávať operácie s týmto zoznamom.
- Okrem toho môžete na vytvorenie rozbaľovacieho zoznamu použiť kartu kontajnera. Pridajte do nej rozbaľovacie položky a odkazy. V tejto kapitole budeme diskutovať o každej metóde s príkladom.
- Môžete použiť akýkoľvek prvok, napr. , alebo
otvorte rozbaľovaciu ponuku.
Pozrite si nižšie uvedené príklady na vytvorenie rozbaľovacieho zoznamu pomocou rôznych metód.
rad objektov java
Príklady
Jednoduchý rozbaľovací zoznam pomocou karty
Je to jednoduchý príklad vytvorenia jednoduchého a ľahkého rozbaľovacieho zoznamu bez použitia akýchkoľvek komplikovaných JavaScript kód a šablóna so štýlmi CSS.
Kopírovať kód
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> Vyskúšajte to Výkon
Spustením vyššie uvedeného kódu dostanete odpoveď rovnakú ako daná snímka obrazovky. Bude obsahovať rozbaľovaciu ponuku so zoznamom výukových stránok.
Vyberte jednu položku z rozbaľovacieho zoznamu kliknutím na ňu.
Na obrázku nižšie vidíte, že vybratá položka sa zobrazila vo výstupnom poli.
Rozbaľovací zoznam je možné vytvoriť aj inými spôsobmi; pozri niekoľko ďalších príkladov nižšie.
Rozbaľovací zoznam pomocou tlačidla a karty div
V tomto príklade vytvoríme rozbaľovací zoznam s tlačidlom so zoznamom položiek ako rozbaľovacím menu.
Kopírovať kód
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> Vyskúšajte to Výkon
Kliknutím na toto rozbaľovacie tlačidlo získate zoznam položiek, v ktorých musíte vybrať jednu položku z tohto zoznamu. Pozrite si snímku obrazovky nižšie:
Klikni na Rozbaľovací zoznam a skryť zoznam.
Príklad viacnásobného rozbaľovacieho zoznamu
Vo vyššie uvedených príkladoch sme vytvorili jeden rozbaľovací zoznam. Teraz vytvoríme formulár s viacerými rozbaľovacími ponukami rôznych online zoznamov technických predmetov, napr C , C++ , PHP , MySQL a Java , kategorizované do niekoľkých kategórií. Keď používateľ klikne na konkrétne rozbaľovacie tlačidlo, otvorí sa vám príslušný rozbaľovací zoznam.
Pozrite si nižšie uvedený príklad, ako to urobiť:
.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;>