Než začnete vytvářet rozevírací seznam, je důležité vědět, co je rozevírací seznam. Rozbalovací seznam je přepínatelná nabídka, která uživateli umožňuje vybrat jednu z více možností. Možnosti v tomto seznamu jsou definovány v kódování, které je spojeno s funkcí. Když kliknete nebo vyberete tuto možnost, daná funkce se spustí a začne vykonávat.
Většinu času jste na registračních formulářích viděli rozevírací seznam pro výběr státu nebo města z rozbalovací nabídky. Rozbalovací seznam nám umožňuje vybrat pouze jednu ze seznamu položek. Podívejte se na níže uvedený snímek obrazovky, jak vypadá rozevírací seznam-
Důležité body pro vytvoření rozevíracího seznamu
- Karta se používá s kartou tab k vytvoření jednoduchého rozevíracího seznamu v HTML. Poté JavaScript pomáhá provádět operace s tímto seznamem.
- Kromě toho můžete použít kartu kontejneru k vytvoření rozevíracího seznamu. Přidejte do něj rozevírací položky a odkazy. V této kapitole probereme každou metodu na příkladu.
- Můžete použít jakýkoli prvek, např. nebo
otevřete rozevírací nabídku.
Podívejte se na níže uvedené příklady pro vytvoření rozevíracího seznamu pomocí různých metod.
Příklady
Jednoduchý rozevírací seznam pomocí karty
Je to jednoduchý příklad vytvoření jednoduchého a snadného rozevíracího seznamu bez použití jakéhokoli složitého JavaScript kód a šablona stylů CSS.
Kopírovat 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> Otestujte to hned Výstup
Spuštěním výše uvedeného kódu získáte odpověď stejnou jako daný snímek obrazovky. Bude obsahovat rozbalovací nabídku se seznamem výukových webů.
vba
Vyberte jednu položku z rozevíracího seznamu kliknutím na ni.
Podívejte se na níže uvedeném snímku obrazovky, že vybraná položka byla zobrazena ve výstupním poli.
Rozbalovací seznam lze vytvořit pomocí jiných způsobů; viz několik dalších příkladů níže.
Rozbalovací seznam pomocí tlačítka a karty div
V tomto příkladu vytvoříme rozevírací seznam s tlačítkem, které má jako rozbalovací nabídku seznam položek.
c# slovník
Kopírovat 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> Otestujte to hned Výstup
Kliknutím na toto rozbalovací tlačítko získáte seznam položek, ve kterém musíte vybrat jednu položku z tohoto seznamu. Podívejte se na snímek obrazovky níže:
Klikněte na Rozbalovací seznam a skryjte seznam.
Příklad vícenásobného rozevíracího seznamu
Ve výše uvedených příkladech jsme vytvořili jeden rozevírací seznam. Nyní vytvoříme formulář s více rozevíracími nabídkami různých online seznamů technických předmětů, jako je např C , C++ , PHP , MySQL , a Jáva , rozdělené do několika kategorií. Když uživatel klikne na konkrétní rozevírací tlačítko, otevře se vám jeho příslušný rozevírací seznam.
Podívejte se na níže uvedený příklad, jak na to:
.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;>