Преди да започнете да създавате падащ списък, е важно да знаете какво е падащ списък. Падащият списък е меню с възможност за превключване, което позволява на потребителя да избере една опция от няколко. Опциите в този списък са дефинирани в кодиране, което е свързано с функция. Когато щракнете или изберете тази опция, тази функция се задейства и започва да се изпълнява.
Виждали сте падащ списък през повечето време във формулярите за регистрация, за да изберете щата или града от падащото меню. Падащият списък ни позволява да изберем само един от списъка с елементи. Вижте екранната снимка по-долу как изглежда падащият списък -
Важни точки за създаване на падащ списък
- Разделът се използва с раздел за създаване на прост падащ списък в HTML. След това JavaScript помага да се извърши операция с този списък.
- Освен това, можете да използвате раздела контейнер, за да създадете падащия списък. Добавете падащите елементи и връзки в него. Ще обсъдим всеки метод с пример в тази глава.
- Можете да използвате всеки елемент като, , или
за да отворите падащото меню.
Вижте примерите по-долу, за да създадете падащ списък с помощта на различни методи.
Примери
Прост падащ списък с помощта на раздел
Това е прост пример за създаване на прост и лесен падащ списък, без да се използват никакви сложни JavaScript код и CSS таблица със стилове.
Копиране на код
машинен език
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> Тествайте сега Изход
Като изпълните горния код, ще получите отговора, същият като дадения екран. Той ще съдържа падащо меню със списък от сайтове за уроци.
Изберете един елемент от падащия списък, като щракнете върху него.
Вижте на екранната снимка по-долу, че избраният елемент е показан в полето за изход.
Падащ списък може да бъде създаден по други начини; вижте още няколко примера по-долу.
jpa срещу хибернация
Падащ списък с бутон и раздел div
В този пример ще създадем падащ списък с бутон, който има списък с елементи като падащо меню.
Копиране на код
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> Тествайте сега Изход
Като щракнете върху този падащ бутон, ще получите списък с елементи, в който трябва да изберете един елемент от този списък. Вижте екранната снимка по-долу:
ssis
Кликнете върху Падащ списък бутон и скриване на списъка.
Пример за падащ списък с множество
В горните примери създадохме един падащ списък. Сега ще създадем формуляр с множество падащи менюта от списъци с различни онлайн уроци по технически теми като ° С , C++ , PHP , MySQL , и Java , категоризирани в няколко категории. Когато потребителят щракне върху конкретен падащ бутон, съответният падащ списък ще се отвори пред вас.
Вижте примера по-долу как да го направите:
.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;>