Zanim zaczniesz tworzyć listę rozwijaną, ważne jest, aby wiedzieć, czym jest lista rozwijana. Lista rozwijana to przełączalne menu, które pozwala użytkownikowi wybrać jedną opcję spośród wielu. Opcje na tej liście są zdefiniowane w kodowaniu, które jest powiązane z funkcją. Po kliknięciu lub wybraniu tej opcji funkcja ta zostanie uruchomiona i zacznie działać.
W formularzach rejestracyjnych najczęściej widziałeś listę rozwijaną, za pomocą której możesz wybrać stan lub miasto z menu rozwijanego. Lista rozwijana pozwala nam wybrać tylko jedną z listy pozycji. Zobacz poniższy zrzut ekranu, jak wygląda lista rozwijana-
Ważne punkty dotyczące tworzenia listy rozwijanej
- Zakładka jest używana z zakładką do tworzenia prostej listy rozwijanej w formacie HTML. Następnie JavaScript pomaga wykonać operację na tej liście.
- Poza tym możesz użyć karty kontenera, aby utworzyć listę rozwijaną. Dodaj elementy rozwijane i linki w nich zawarte. Każdą metodę omówimy na przykładzie w tym rozdziale.
- Możesz użyć dowolnego elementu, np. , Lub
aby otworzyć menu rozwijane.
Zobacz poniższe przykłady, aby utworzyć listę rozwijaną przy użyciu różnych metod.
Przykłady
Prosta lista rozwijana za pomocą karty
Jest to prosty przykład tworzenia prostej i łatwej listy rozwijanej bez użycia skomplikowanych elementów JavaScript kod i arkusz stylów CSS.
Skopiuj kod
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> Przetestuj teraz Wyjście
Uruchamiając powyższy kod otrzymasz odpowiedź taką samą jak na podanym zrzucie ekranu. Będzie zawierało rozwijane menu zawierające listę witryn z samouczkami.
Wybierz jedną pozycję z listy rozwijanej, klikając ją.
Na poniższym zrzucie ekranu widać, że wybrany element został wyświetlony w polu wyjściowym.
Listę rozwijaną można utworzyć na inne sposoby; zobacz więcej przykładów poniżej.
Lista rozwijana za pomocą przycisku i karty div
W tym przykładzie utworzymy listę rozwijaną z przyciskiem posiadającym listę pozycji jako menu rozwijane.
wewnętrzne przechodzenie drzewa binarnego
Skopiuj kod
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> Przetestuj teraz Wyjście
Klikając ten przycisk rozwijany, otrzymasz listę pozycji, w której musisz wybrać jedną pozycję z tej listy. Zobacz zrzut ekranu poniżej:
Kliknij na Lista rozwijana i ukryj listę.
Przykładowa lista rozwijana z wieloma listami rozwijanymi
W powyższych przykładach utworzyliśmy pojedynczą listę rozwijaną. Utworzymy teraz formularz z wieloma rozwijanymi menu zawierającymi różne listy samouczków technicznych online, takich jak C , C++ , PHP , MySQL'a , I Jawa , podzielone na kilka kategorii. Kiedy użytkownik kliknie konkretny przycisk rozwijany, otworzy się odpowiednia lista rozwijana.
Zobacz poniższy przykład jak to zrobić:
.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;>