Many developers rely on Bootstrap for these purposes as it comes with built in components that can be reused easily and increase the productivity of a developer but understanding how each thing works on its own first is important before jumping into using reusable components. Here in this article we’ll discuss how to create a dropdown menu using JavaScript.
Dropdown Menu with JavaScript
We all have seen dropdown menus and used them while filling various online forms for selecting a particular city, state or simply choosing from a bunch of dropdown options provided to us.
These are toggleable menus that consist of multiple options from which the user can choose a particular option. These options can either be defined in the HTML list or in JavaScript as an array and they’re associated with a function. Whenever a user clicks on an option, the function is triggered and a corresponding action occurs.
Important Points for Creating a Dropdown Menu
You can create a simple dropdown menu with the use of an HTML list that uses the <select> tag along with the <option> tag. An id is provided to the list which is used in JavaScript to get the option selected by the user.
You can create a more complex dropdown menu using mainly JavaScript with a little bit of HTML. The options will be defined as an array in JavaScript.
Let’s understand each of these better with the code for better understanding.
Simple Dropdown Menu
First, create a list in HTML providing it some id in a form tag, here we provide it “option” as an id.
Options are defined in each <option> tag and on change a function is called.
The function is defined in JavaScript by the name “dropdownMenu()” which triggers whenever the option is selected.
Last thing is an input is created with id “city” in which the option appears selected by the user.
<head>
<title>Simple Dropdown Menu</title>
</head>
<script>
function dropdownMenu() {
var list = document.getElementById("option");
document.getElementById("city").value = list.options[list.selectedIndex].text;
}
</script>
<body>
<form>
<b> Select your City from the list</b>
<select id = "option" onchange = "dropdownMenu()" >
<option> ---Choose City--- </option>
<option> New York </option>
<option> Amsterdam </option>
<option> Paris </option>
<option> London </option>
</select>
<p> Your selected city is:
<input type = "text" id = "city" size = "20" </p>
</form>
</body>
</html>
Output:
Dropdown Menu using div along with JavaScript
First, create two divs in the HTML tag that triggers the function and displays the menu on the screen.
Define the list as an array in JavaScript and use documnet.createElement() method to create a dropdown list programmatically in JavaScript
Then call the method appendChild() to append the dropdown menu at the end of the list.
<body>
<div id="list"></div>
<br>
<div>
<button id="show">Show the list</button>
</div>
</body>
</html>
<script>
document.getElementById('show').onclick = function() {
var items = ["New York", "Amsterdam", "Paris", "London"];
var select = document.createElement("select");
select.name = "city";
select.id = "city"
for (const val of items)
{
var option = document.createElement("option");
option.value = val;
option.text = val.charAt(0).toUpperCase() + val.slice(1);
select.appendChild(option);
}
var label = document.createElement("label");
label.innerHTML = "Select your City from the list: "
label.htmlFor = "city";
document.getElementById("list").appendChild(label).appendChild(select);
}
</script>
Output:
Conclusion
JavaScript is used for creating various interactive elements on the webpage to increase the dynamic behavior of the page. In this article we created a dropdown menu in JavaScript with the code. Firstly, a simple drop down menu was created using HTML and function being called through JavaScript, then we made it complex and created the dropdown menu with JavaScript and a lil bit of HTML. The items were defined as an array and a dropdown menu was created using built-in methods. Code is provided for both for your better understanding.
