Перш ніж почати створювати розкривний список, важливо знати, що таке розкривний список. Список, що розкривається, — це меню, яке можна перемикати, яке дозволяє користувачеві вибрати один варіант із кількох. Параметри в цьому списку визначено кодуванням, яке пов’язано з функцією. Коли ви клацаєте або вибираєте цей параметр, ця функція запускається та починає працювати.
Ви найчастіше бачили розкривний список у формах реєстрації для вибору штату чи міста зі спадного меню. Розкривний список дозволяє нам вибрати лише один із списку елементів. Подивіться на знімок екрана нижче, як виглядає розкривний список.
Важливі моменти для створення розкривного списку
- Вкладка використовується разом із вкладкою для створення простого спадного списку в HTML. Після цього JavaScript допомагає виконувати операції з цим списком.
- Крім цього, ви можете використовувати вкладку контейнера для створення розкривного списку. Додайте елементи спадного меню та посилання всередині нього. У цьому розділі ми обговоримо кожен метод на прикладі.
- Ви можете використовувати будь-який елемент, наприклад, , або
щоб відкрити спадне меню.
Перегляньте наведені нижче приклади створення розкривного списку за допомогою різних методів.
Приклади
Простий спадний список за допомогою вкладки
Це простий приклад створення простого та легкого спадного списку без використання будь-яких складних JavaScript код і таблицю стилів CSS.
Копіювати код
у регулярному виразі Java
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> Перевірте зараз Вихід
Запустивши наведений вище код, ви отримаєте відповідь, таку ж, як на наведеному знімку екрана. Він міститиме спадне меню зі списком сайтів навчальних посібників.
Виберіть один пункт зі спадного списку, натиснувши на нього.
Подивіться на наведеному нижче знімку екрана, що вибраний елемент відображається в полі виводу.
Випадаючий список можна створити іншими способами; перегляньте ще кілька прикладів нижче.
байтів python у рядок
Розкривний список за допомогою кнопки та вкладки 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> Перевірте зараз Вихід
Натиснувши цю кнопку спадного списку, ви отримаєте список елементів, у якому вам потрібно вибрати один елемент із цього списку. Перегляньте знімок екрана нижче:
вікас дивякірті
Натисніть на Випадаючий список і сховайте список.
Приклад кількох розкривних списків
У наведених вище прикладах ми створили єдиний спадний список. Тепер ми створимо форму з декількома спадними меню різних онлайн-підручників з технічних предметів, як-от C , 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;>