Bevor Sie mit der Erstellung einer Dropdown-Liste beginnen, ist es wichtig zu wissen, was eine Dropdown-Liste ist. Eine Dropdown-Liste ist ein umschaltbares Menü, das es dem Benutzer ermöglicht, eine Option aus mehreren auszuwählen. Die Optionen in dieser Liste werden in der Codierung definiert, die einer Funktion zugeordnet ist. Wenn Sie auf diese Option klicken oder sie auswählen, wird diese Funktion ausgelöst und ausgeführt.
Meistens haben Sie auf Registrierungsformularen eine Dropdown-Liste gesehen, in der Sie das Bundesland oder die Stadt aus dem Dropdown-Menü auswählen können. Eine Dropdown-Liste ermöglicht es uns, nur eines aus der Liste der Elemente auszuwählen. Sehen Sie sich den folgenden Screenshot an, wie die Dropdown-Liste aussieht:
Wichtige Punkte zum Erstellen einer Dropdown-Liste
- Der Tab wird mit tab verwendet, um die einfache Dropdown-Liste in HTML zu erstellen. Danach hilft JavaScript bei der Ausführung der Operation mit dieser Liste.
- Ansonsten können Sie die Dropdown-Liste über die Registerkarte „Container“ erstellen. Fügen Sie darin die Dropdown-Elemente und Links hinzu. Wir werden jede Methode in diesem Kapitel anhand eines Beispiels diskutieren.
- Sie können jedes Element verwenden, z. , oder
um das Dropdown-Menü zu öffnen.
Sehen Sie sich die folgenden Beispiele an, um eine Dropdown-Liste mit verschiedenen Methoden zu erstellen.
Beispiele
Einfache Dropdown-Liste mit Tab
Es ist ein einfaches Beispiel für die Erstellung einer einfachen Dropdown-Liste ohne komplizierte Verwendung JavaScript Code und CSS-Stylesheet.
Code kopieren
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> Testen Sie es jetzt Ausgabe
Wenn Sie den obigen Code ausführen, erhalten Sie die gleiche Antwort wie im angegebenen Screenshot. Es enthält ein Dropdown-Menü mit einer Liste von Tutorial-Sites.
Wählen Sie ein Element aus der Dropdown-Liste aus, indem Sie darauf klicken.
Im folgenden Screenshot sehen Sie, dass das ausgewählte Element im Ausgabefeld angezeigt wurde.
Eine Dropdown-Liste kann auf andere Weise erstellt werden; Weitere Beispiele finden Sie weiter unten.
Dropdown-Liste mit Schaltfläche und Div-Registerkarte
In diesem Beispiel erstellen wir eine Dropdown-Liste mit einer Schaltfläche, die eine Liste von Elementen als Dropdown-Menü enthält.
Code kopieren
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> Testen Sie es jetzt Ausgabe
Wenn Sie auf diese Dropdown-Schaltfläche klicken, erhalten Sie eine Liste mit Elementen, in der Sie ein Element aus dieser Liste auswählen müssen. Siehe den Screenshot unten:
Klick auf das Dropdown-Liste Klicken Sie auf die Schaltfläche und blenden Sie die Liste aus.
Beispiel für mehrere Dropdown-Listen
In den obigen Beispielen haben wir eine einzelne Dropdown-Liste erstellt. Wir erstellen nun ein Formular mit mehreren Dropdown-Menüs verschiedener Online-Listen mit technischen Tutorials wie z C , C++ , PHP , MySQL , Und Java , kategorisiert in mehrere Kategorien. Wenn der Benutzer auf eine bestimmte Dropdown-Schaltfläche klickt, wird die entsprechende Dropdown-Liste für Sie geöffnet.
Sehen Sie sich das folgende Beispiel an, wie es geht:
.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;>