Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a dropdown list using JavaScript?
We will learn to create a dropdown list using HTML and JavaScript below. Before starting with the article, let's understand the dropdown list and why we need to use it.
The dropdown list gives multiple choices to users and allows them to select one value from all options. However, we can do the same thing using multiple radio buttons, but what if we have hundreds of choices? Then we can use the dropdown menu.
When users click the dropdown button, it opens all the choices, and users can select anyone. Also, the dropdown provides a better user experience than the radio button.
Using <select> and <option> Tags
The <select> tag of HTML allows us to create a dropdown list. We can use the <option> tag to add the options to the dropdown list.
Syntax
<select id="dropdown" onchange="selectOption()">
<option>Option 1</option>
<option>Option 2</option>
</select>
<script>
function selectOption() {
let dropdown = document.getElementById('dropdown');
let selectedValue = dropdown.options[dropdown.selectedIndex].text;
}
</script>
In the above syntax, we are getting the index of the selected option using the selectedIndex property, and based on the index, we can get details of the option.
Example
In the example below, we have created the dropdown menu for car brands. The 'onchange' event will trigger whenever the user selects new values and invoke the selectOption() function.
<html>
<head>
</head>
<body>
<h2>Using the select and option HTML tag to create a dropdown list in JavaScript</h2>
<h3>Choose any car from below dropdown list.</h3>
<select id="dropdown" onchange="selectOption()">
<option>BMW</option>
<option>Range Rover</option>
<option>Mercedes</option>
<option>Honda city</option>
<option>Verna</option>
<option>Tata Safari</option>
</select>
<br><br>
<div id="output">The selected value is BMW.</div>
<script>
let output = document.getElementById('output');
function selectOption() {
let dropdown = document.getElementById('dropdown');
// get the index of the selected option
let selectedIndex = dropdown.selectedIndex;
// get a selected option and text value using the text property
let selectedValue = dropdown.options[selectedIndex].text;
output.innerHTML = "The selected value is " + selectedValue;
}
</script>
</body>
</html>
Creating Custom Dropdown with <div> Elements
We can use normal HTML, CSS, and JavaScript to create a dropdown menu from scratch. This approach gives us complete control over styling and behavior.
Implementation Steps
Step 1: Create a div element for the dropdown title with the 'menu-dropdown' class.
Step 2: Create a div element with the 'dropdown-list' class to contain dropdown options.
Step 3: Style the dropdown elements using CSS and add options in <p> tag format.
Step 4: Add JavaScript to handle dropdown behavior and option selection.
Example
In the example below, we create a custom dropdown menu from scratch. When users click on the dropdown title, it toggles open/closed, and clicking on any option selects it.
<html>
<head>
<style>
.menu-dropdown {
width: 10rem;
height: 1.8rem;
font-size: 1.5rem;
background-color: #f0f0f0;
color: black;
border: 2px solid #ccc;
border-radius: 10px;
padding: 2px 5px;
text-align: center;
justify-content: center;
cursor: pointer;
}
.dropdown-list {
display: none;
z-index: 10;
background-color: white;
color: black;
font-size: 1.2rem;
width: 10.5rem;
border: 2px solid #ccc;
border-radius: 10px;
margin-top: 0rem;
cursor: pointer;
}
.dropdown-list p {
padding: 8px 10px;
margin: 0;
}
.dropdown-list p:hover {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<h2>Using div and p tags to create a dropdown list in JavaScript</h2>
<h3>Choose any value from below dropdown list.</h3>
<div id="output">The selected value is none</div>
<br>
<div class="menu-dropdown" onclick="openDropdown()">
Choose Value
</div>
<div class="dropdown-list" id="list">
<p>First option</p>
<p>Second option</p>
<p>Third option</p>
<p>Fourth option</p>
<p>Fifth option</p>
<p>Sixth option</p>
<p>Seventh option</p>
</div>
<script>
let output = document.getElementById('output');
let dropdownList = document.getElementById("list");
function openDropdown() {
if (dropdownList.style.display === "none" || dropdownList.style.display === "") {
dropdownList.style.display = "block";
} else {
dropdownList.style.display = "none";
}
}
const p_elements = dropdownList.getElementsByTagName("p");
// iterate through all p elements inside dropdown list only
for (let i = 0; i < p_elements.length; i++) {
const option = p_elements[i];
// add event listener to p element
option.addEventListener("click", function() {
// When a user clicks on any p element, get its innerHTML
output.innerHTML = "The selected option is " + option.innerHTML;
// close the dropdown list once users select an option
dropdownList.style.display = "none";
});
}
</script>
</body>
</html>
Comparison of Methods
| Method | Advantages | Disadvantages |
|---|---|---|
| <select> tag | Built-in HTML element, accessible, works without JavaScript | Limited styling options, browser-dependent appearance |
| Custom div dropdown | Full control over styling, customizable behavior | Requires more code, need to handle accessibility manually |
Conclusion
Use the HTML <select> tag for simple, accessible dropdowns. Choose custom div dropdowns when you need complete control over styling and behavior. Both approaches provide effective ways to create user-friendly dropdown menus in web applications.
13K+ Views
