Prior to initiating the creation of a dropdown list, it is essential to understand the concept of a dropdown list. A dropdown list is an interactive menu that enables users to select a single option from a variety of choices. The selections presented in this list are specified through coding, which is linked to a particular function. When a user clicks or selects an option, the associated function is activated, commencing its execution.
You are likely familiar with seeing a dropdown menu frequently on registration forms, where users can select their state or city from a provided list. A dropdown list enables the selection of a single option from a collection of items. Refer to the screenshot below for a visual representation of how a dropdown list appears:
Important points to create a dropdown list
- The <select> tab is used with <option> tab to create the simple dropdown list in HTML. After that JavaScript helps to perform operation with this list.
- Other than this, you can use the container tab <div> to create the dropdown list. Add the dropdown items and links inside it. We will discuss each method with an example in this chapter.
- You can use any element such as <button>, <a>, or <p> to open the dropdown menu.
Examine the following illustrations to construct a dropdown list utilizing various techniques.
Examples
Simple dropdown list using <select> tab
This is an straightforward demonstration of how to create an uncomplicated dropdown list without the need for any complex JavaScript code or CSS stylesheets.
Copy Code
<html>
<head>
<title>dropdown menu using select tab</title>
</head>
<script>
function favTutorial() {
var mylist = document.getElementById("myList");
document.getElementById("favourite").value = mylist.options[mylist.selectedIndex].text;
}
</script>
<body>
<form>
<b> Select you favourite tutorial site using dropdown list </b>
<select id = "myList" onchange = "favTutorial()" >
<option> ---Choose tutorial--- </option>
<option> hello world </option>
<option> Example </option>
<option> hello world </option>
<option> geeksforgeeks </option>
</select>
<p> Your selected tutorial site is:
<input type = "text" id = "favourite" size = "20" </p>
</form>
</body>
</html>
Output
Executing the code provided above will yield a response identical to the screenshot displayed. This response will feature a dropdown menu that includes a compilation of tutorial websites.
Choose a single option from the dropdown menu by clicking on it.
Observe in the screenshot provided below that the chosen item is visible in the output area.
There are various methods to create a dropdown list; below are additional examples for your reference.
Dropdown list using button and div tab
In this illustration, we will build a dropdown menu that features a button, which will display a list of items when clicked.
Copy Code
<html>
<head>
<title>dropdown menu using button</title>
</head>
<style>
/* 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;
}
</style>
<script>
//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";
}
}
</script>
<body>
<div class="dropdown">
<button onclick="show_hide()" class="button">Choose Language</button>
<center>
<!-- dropdown list items will show when we click the drop button -->
<div id="list-items">
<a href="#"> Hindi </a>
<a href="#"> English </a>
<a href="#"> Spanish </a>
<a href="#"> Chinese </a>
<a href="#"> Japanese </a>
</div>
</center>
</body>
</html>
Output
Upon clicking this dropdown button, a list of items will appear, from which you need to choose a single item. Refer to the screenshot provided below:
Select the Dropdown List button and conceal the list.
Multiple dropdown list Example
In the preceding examples, we developed a singular dropdown menu. Now, we will construct a form featuring multiple dropdown lists that encompass various online tutorials for technical subjects including C, C++, PHP, MySQL, and Java, organized into distinct categories. When a user interacts with a specific dropdown button, the corresponding dropdown list will be displayed for their selection.
See the below example how to do it:
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<h2>List of tutorials using Dropdown menu</h2>
<p>Click on the button to open the tutorial dropdown menu.</p>
<div class="dropdown">
<button onclick="programmingList()" class="dropbtn">Programming</button>
<div id="myDropdown1" class="dropdown-content">
<a href="#java" onclick="java()">Java</a>
<a href="#python" onclick="python()">Python</a>
<a href="#c++" onclick="cpp()">C++</a>
<a href="#c" onclick="c()">C</a>
</div>
</div>
<div class="dropdown">
<button onclick="databaseList()" class="dropbtn">Database</button>
<div id="myDropdown2" class="dropdown-content">
<a href="#mysql" onclick="mysql()">MySQL</a>
<a href="#mdb" onclick="mDB()">MongoDB</a>
<a href="#cass" onclick="cassandra()">Cassandra</a>
</div>
</div>
<div class="dropdown">
<button onclick="WebTechList()" class="dropbtn">Web Technology</button>
<div id="myDropdown3" class="dropdown-content">
<a href="#php" onclick="php()">PHP</a>
<a href="#css" onclick="css()">CSS</a>
<a href="#js" onclick="js()">JavaScript</a>
</div>
</div>
<script>
/* 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://logic-practice.com/java-tutorial");
}
function python() {
window.location.replace("https://logic-practice.com/python-tutorial");
}
function cpp() {
window.location.replace("https://logic-practice.com/cpp-tutorial");
}
function c() {
window.location.replace("https://logic-practice.com/c-programming-language-tutorial");
}
function mysql() {
window.location.replace("https://logic-practice.com/mysql-tutorial");
}
function mDB() {
window.location.replace("https://logic-practice.com/mongodb-tutorial");
}
function cassandra() {
window.location.replace("https://logic-practice.com/cassandra-tutorial");
}
function php() {
window.location.replace("https://logic-practice.com/php-tutorial");
}
function css() {
window.location.replace("https://logic-practice.com/css-tutorial");
}
function js() {
window.location.replace("https://logic-practice.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');
}
}
}
}
</script>
</body>
</html>
Output
Upon running the code provided above, a form featuring three dropdown menus will be displayed. Each dropdown menu contains a selection of items.
Select any of the dropdown buttons to view the list of available items.
When you select MongoDB from the database tutorial section, it will take you to our Example MongoDB tutorial. Please refer to the output provided below:
Note: if you click outside the dropdown window, the dropdown list will be disappeared.
Typically, a dropdown menu is utilized to classify items of a similar category. This implies that the list comprises items sharing common characteristics. It closely resembles a tutorial site, which features various lists of tutorials pertaining to our Example subject.