Пре него што почнете са креирањем падајуће листе, важно је да знате шта је то падајуће листе. Падајућа листа је мени који се може мењати и који омогућава кориснику да изабере једну од више опција. Опције на овој листи су дефинисане у кодирању, које је повезано са функцијом. Када кликнете или одаберете ову опцију, та функција се покреће и почиње да ради.
Већину времена на обрасцима за регистрацију сте видели падајућу листу да бисте изабрали државу или град из падајућег менија. Падајућа листа нам омогућава да изаберемо само једну са листе ставки. Погледајте снимак екрана испод како изгледа падајући списак -
јава валидни идентификатори
Важне тачке за креирање падајуће листе
- Картица се користи са таб за креирање једноставне падајуће листе у ХТМЛ-у. Након тога ЈаваСцрипт помаже да се изврши операција са овом листом.
- Осим овога, можете користити картицу контејнера за креирање падајуће листе. Додајте падајуће ставке и везе унутар њега. У овом поглављу ћемо размотрити сваку методу са примером.
- Можете користити било који елемент као што је, , или
да бисте отворили падајући мени.
Погледајте примере у наставку да бисте креирали падајућу листу користећи различите методе.
Примери
Једноставна падајућа листа помоћу картице
То је једноставан пример креирања једноставне и лаке падајуће листе без употребе компликованих ЈаваСцрипт кода и ЦСС стилова.
Копирај код
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> Тестирајте одмах Излаз
онцлицк јавасцрипт
Покретањем горњег кода, добићете одговор исти као на датом снимку екрана. Садржаће падајући мени са листом туторијала.
Изаберите једну ставку са падајуће листе кликом на њу.
Погледајте на слици испод да је изабрана ставка приказана у излазном пољу.
Падајућа листа се може креирати на неке друге начине; погледајте још неколико примера у наставку.
нумпи сумматион
Падајућа листа помоћу дугмета и картице див
У овом примеру, направићемо падајућу листу са дугметом које има листу ставки као падајући мени.
Копирај код
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> Тестирајте одмах Излаз
Кликом на ово дугме падајућег менија добићете листу ставки у којој морате да изаберете једну ставку са те листе. Погледајте снимак екрана испод:
Кликните на Падајуће листе дугме и сакријте листу.
премотавање речи цсс
Пример вишеструке падајуће листе
У горњим примерима направили смо једну падајућу листу. Сада ћемо креирати образац са вишеструким падајућим менијем разних онлајн листа техничких предмета као што су Ц , Ц++ , ПХП , МиСКЛ , и Јава , категорисан у неколико категорија. Када корисник кликне на одређено дугме падајућег менија, отвориће вам се одговарајућа падајућа листа.
Погледајте пример у наставку како се то ради:
.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;>