Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Use the <select> and <option> tags to create a dropdown list
The <select> tag of HTML allows us to create a dropdown list. We can use the <select> tag to add the options to the dropdown list.
Syntax
Users can follow the syntax below to create a dropdown menu using the <select> and <option> HTML tags.
<select id = "dropdown" onchange = "selectOption()">
// add options here
</select>
<script>
function selectOption() {
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 of the <script> tag, 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. Also, we have written the JavaScript code to get the selected value from the dropdown. The ‘onchange’ event will trigger whenever the user selects new values and invoke the selectOption() function.
Also, we have given some CSS styles to the default dropdown menu. Furthermore, we hide the dropdown menu's arrow to improve it. In CSS, users can see how they can customize the default dropdown.
<html>
<head>
<body>
<h2>Using the <i> select and option HTML tag </i> 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>
Use the <div> HTML tag to create a dropdown list
We can use normal HTML, CSS, and JavaScript to create a dropdown menu from scratch. We can use HTML to make dropdowns, CSS to style them properly, and JavaScript to add behavior.
Steps
Users can follow the steps below to create a dropdown menu using HTML, CSS, and JavaScript.
Step 1 − Create a div element for the dropdown title, and style it using CSS. We have created the div element with the ‘menu-dropdwon’ class.
Step 2 − Create a div element with the ‘dropdown-list’ class to add dropdown options.
Step 3 − Style the div with the class ‘dropdown-list’ and add options in the <p> tag format. Also, style the <p> HTML elements of the div.
Step 4 − Now, use JavaScript to add the behavior to our dropdown.
Step 5 − Add the onclick event on the div with the class name ‘menu-dropdwon’. Also, invoke the openDropdown() function when the user clicks the div.
Step 6 − In the openDropdown() function, access the div element with the class name ‘dropdown-list’ and show if it’s hidden or hides it if it is visible using the display property.
Step 7 − Now, add a click event to every <p> tag using JavaScript, and for that, use the for a loop.
Step 8 − Inside the callback function of the event listener, show the clicked element’s innerHTML in the output, and hide the dropdown menu by changing the display to none.
Example
In the example below, we followed the steps above to create a dropdown menu from scratch. In the output, users can observe that when they click on the dropdown title, it opens, and when they click again, it closes. Also, when they click on any option, it selects the option and renders it on display.
<html>
<head>
<style>
.menu-dropdown {
width: 10rem;
height: 1.8rem;
font-size: 1.5rem;
background-color: aqua;
color: black;
border: 2px solid yellow;
border-radius: 10px;
padding: 2px 5px;
text-align: center;
justify-content: center;
cursor: pointer;
}
.dropdown-list {
display: none;
z-index: 10;
background-color: green;
color: pink;
font-size: 1.2rem;
width: 10.5rem;
border-radius: 10px;
margin-top: 0rem;
cursor: pointer;
}
.dropdown-list p {
padding: 3px 10px;
}
.dropdown-list p:hover {
background-color: blue;
}
</style>
</head>
<body>
<h2>
Using the <i> div and p tag </i> 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>
<!-- whenever we select the value, it will invoke the selectOption() function -->
<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");
dropdownList.style.display = "none";
function openDropdown() {
if (dropdownList.style.display != "none") {
dropdownList.style.display = "none";
} else {
dropdownList.style.display = "block";
}
}
const p_elements = document.getElementsByTagName("p");
// access all p elements
const totalP = p_elements.length;
// iterate through all <p> elements
for (let i = 0; i < totalP; i++) {
const option = p_elements[i];
// add event listner to <p> element
option.addEventListener("click", () => {
// 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>
Users learned two different approaches to creating a dropdown menu. One uses the <select> and <option> tags which is the default select menu in HTML, and another uses only HTML, CSS< and JavaScript.
11K+ Views
