Dropdown lists are commonly used in web development to allow users to select an option from a predefined list, and getting that value (selected by a user) is also very important to use in further processing. In this blog, you will learn about how you can get a selected value in a dropdown list using JavaScript.
Table of Contents:
HTML Setup For Dropdown List
Before learning about different methods for getting selected values in a dropdown list by using JavaScript. Let’s first create a basic dropdown list for better understanding:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Selected Value Using JS</title>
<style>
select{
padding: 10px;
width: 200px;
}
button{
padding: 7px 20px;
background-color: rgba(255, 166, 0, 0.824);
color: purple;
font-weight: 700;
font-size: medium;
border: 2px solid purple;
}
</style>
</head>
<body>
<h1>Intellipaat Courses</h1>
<select id="dropdown">
<option value="Data Science">Data Science</option>
<option value="Artificial Intelligence">Artificial Intelligence</option>
<option value="Web Development">Web Development</option>
</select>
<button onclick="getSelectedValue()">Get Value</button>
<p id="output"></p>
</body>
</html>
Output:
Getting Selected Value From Dropdown List Using Javascript
There are multiple ways to get the selected value from the dropdown list using JavaScript. Let’s discuss them all one by one:
Method 1: Using value Property
You can use the .value property of the <select> element. It is the simplest way to get the selected value from the dropdown list.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Selected Value Using JS</title>
<style>
select{
padding: 10px;
width: 200px;
}
button{
padding: 7px 20px;
background-color: rgba(255, 166, 0, 0.824);
color: purple;
font-weight: 700;
font-size: medium;
border: 2px solid purple;
}
</style>
</head>
<body>
<h1>Intellipaat Courses</h1>
<select id="dropdown">
<option value="Data Science">Data Science</option>
<option value="Artificial Intelligence">Artificial Intelligence</option>
<option value="Web Development">Web Development</option>
</select>
<button onclick="getSelectedValue()">Get Value</button>
<p id="output"></p>
</body>
<script>
function getSelectedValue() {
let dropdownElem = document.getElementById("dropdown");
let selectedValue = dropdownElem.value;
document.getElementById("output").innerText = "Selected Value: " + selectedValue;
}
</script>
</html>
Output:
Explanation: .value is a property of the <select> element through which we can get the value of the element. But you have to be careful when you write the value attribute of <option> element, because, only the value that you write inside the value attribute is printed.
Method 2: Using selectedIndex Property
Another approach is using the selectedIndex property to get the index of the selected option and get its value.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Selected Value Using JS</title>
<style>
select{
padding: 10px;
width: 200px;
}
button{
padding: 7px 20px;
background-color: rgba(255, 166, 0, 0.824);
color: purple;
font-weight: 700;
font-size: medium;
border: 2px solid purple;
}
</style>
</head>
<body>
<h1>Intellipaat Courses</h1>
<select id="dropdown">
<option value="Data Science">Data Science</option>
<option value="Artificial Intelligence">Artificial Intelligence</option>
<option value="Web Development">Web Development</option>
</select>
<button onclick="getSelectedValue()">Get Value</button>
<p id="output"></p>
</body>
<script>
// Using selectedIndex Property
function getSelectedValue() {
let dropdownElem = document.getElementById("dropdown");
let selectedValue = dropdown.options[dropdownElem.selectedIndex].value;
document.getElementById("output").innerText = "Selected Value: " + selectedValue;
}
</script>
</html>
Output:
Explanation: In this example, you’re using dropdownElem.selectedIndex(), which gives you the index of the selected option, and dropdown.options[index].value, which gives you the value of the selected option.
Method 3: Using querySelector
You can also use querySelector to get the selected option from the dropdown list.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Selected Value Using JS</title>
<style>
select{
padding: 10px;
width: 200px;
}
button{
padding: 7px 20px;
background-color: rgba(255, 166, 0, 0.824);
color: purple;
font-weight: 700;
font-size: medium;
border: 2px solid purple;
}
</style>
</head>
<body>
<h1>Intellipaat Courses</h1>
<select id="dropdown">
<option value="Data Science">Data Science</option>
<option value="Artificial Intelligence">Artificial Intelligence</option>
<option value="Web Development">Web Development</option>
</select>
<button onclick="getSelectedValue()">Get Value</button>
<p id="output"></p>
</body>
<script>
// Using querySelector()
function getSelectedValue() {
let selectedValue = document.querySelector("#dropdown option:checked").value;
document.getElementById("output").innerText = "Selected Value: " + selectedValue;
}
</script>
</html>
Output:
Explanation: Using querySelector(), you directly get the selected value. querySelector(“#dropdown option:checked”) selects the currently checked option.
Method 4: Using event.target.value in an Event Listener
It is a common approach in JavaScript to capture the selected value from a <select> element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Selected Value Using JS</title>
<style>
select {
padding: 10px;
width: 200px;
}
button {
padding: 7px 20px;
background-color: rgba(255, 166, 0, 0.824);
color: purple;
font-weight: 700;
font-size: medium;
border: 2px solid purple;
}
</style>
</head>
<body>
<h1>Intellipaat Courses</h1>
<select id="dropdown">
<option value="">--Select--</option>
<option value="Data Science">Data Science</option>
<option value="Artificial Intelligence">Artificial Intelligence</option>
<option value="Web Development">Web Development</option>
</select>
<p id="output"></p>
</body>
<script>
document.getElementById("dropdown").addEventListener("change", function (event) {
document.getElementById("output").innerText = "Selected Value: " + event.target.value;
});
</script>
</html>
Output:
Explanation: addEventListener(“change”, function(event) {…}) listens for changes in the dropdown. As the change is triggered, the function is executed, and output text is produced.
Handling Edge Cases
While making dropdowns using HTML, CSS, and JavaScript, there are some tricky edge cases that you should be aware of. Here are some of them:
1. When No Option is Selected
If the user has not selected any option from the dropdown then you have to check for it by using if-condition.
Syntax:
if (!dropdown.value) {
alert("Please select a value before proceeding.");
}
2. Working with Multiple <select> Elements
If you have multiple dropdowns, then select all of them using the querySelectorAll()
Syntax:
document.querySelectorAll("select").forEach(dropdown => {
console.log(dropdown.value);
});
These are some of the edge cases. Let’s discuss one example to understand this clearly:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple Dropdown Selection</title>
<style>
body {
padding: 20px;
}
.dropdown {
margin-bottom: 10px;
}
button {
padding: 7px 20px;
background-color: rgba(255, 166, 0, 0.824);
color: purple;
font-weight: 700;
font-size: medium;
border: 2px solid purple;
}
</style>
</head>
<body>
<h2>Select Your Intellipaat Course Content</h2>
<div class="dropdown">
<label for="language">Programming:</label>
<select id="language">
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
</select>
</div>
<div class="dropdown">
<label for="framework">Frameworks :</label>
<select id="framework">
<option value="react">React</option>
<option value="angular">Angular</option>
<option value="vue">Vue</option>
</select>
</div>
<div class="dropdown">
<label for="database">Database:</label>
<select id="database">
<option value="mysql">MySQL</option>
<option value="mongodb">MongoDB</option>
<option value="postgresql">PostgreSQL</option>
</select>
</div>
<button onclick="getSelectedValues()">Get Selected Values</button>
<h3>Selected Values:</h3>
<p id="output"></p>
<script>
function getSelectedValues() {
let dropdowns = document.querySelectorAll("select");
let selectedValues = {};
dropdowns.forEach(dropdown => {
selectedValues[dropdown.id] = dropdown.value;
});
// Display selected values as output
let outputText = `
Language: ${selectedValues.language} <br>
Framework: ${selectedValues.framework} <br>
Database: ${selectedValues.database}
`;
document.getElementById("output").innerHTML = outputText;
}
</script>
</body>
</html>
Output:
Explanation: When you’re dealing with multiple dropdowns in the form then you have to use javascript dynamically to get all values from the multiple dropdowns as we did in the above example.
Conclusion
Getting values from the dropdown using javascript is very essential in web development for handling input in forms. There are multiple ways to achieve this, including using the .value property, selectedIndex, querySelector, and event listeners. Each method has different use cases depending on whether you get the value from a single dropdown or get values from multiple dropdowns. By using these techniques, you can easily manage dropdown selections in any web project.
How to Get Selected Value in Dropdown List Using JavaScript – FAQs
1. How can I get the selected value from a dropdown list using plain JavaScript?
You can get the selected value from the dropdown list using the .value property in JavaScript.
2. What if no option is selected in the dropdown list?
If no option is selected, then you can check it by placing an if-condition inside and on top of the function.
3. Can I use the querySelector method to get the selected value?
Yes, you can use the querySelector() method to get the selected value from a dropdown list.
4. How can I get the selected value from a dropdown list using jQuery?
You can get the selected value from a dropdown list using jQuery with the .val() method. Here is the Syntax for this.
Syntax:
let selectedValue = $(“#dropdown”).val();
console.log(selectedValue);
5. How do you get a particular value from a list in JavaScript?
You can get the value from the list or array in javascript either using indexing or using the .find() method in javascript.
6. How to get selected CheckBox list value in JavaScript?
You can get the selected checkbox values in JavaScript using querySelectorAll and map().