How to use the value property In Javascript
- The value of the selected element can be found by using the value property on the selected element that defines the list.
- This property returns a string representing the value attribute of the <option> element in the list.
- If no option is selected then nothing will be returned.
Syntax:
selectedSelectElement.value;
Example: The below code uses the value property to get the value of the selected dropdown item.
<!DOCTYPE html>
<html>
<head>
<title>
How to get selected value in
dropdown list using JavaScript?
</title>
</head>
<body>
<h1 style="color: green">
w3wiki
</h1>
<b>
How to get selected value in dropdown
list using JavaScript?
</b>
<p> Select one from the given options:
<select id="select1">
<option value="free">Free</option>
<option value="basic">Basic</option>
<option value="premium">Premium</option>
</select>
</p>
<p> The value of the option selected is:
<span class="output"></span>
</p>
<button onclick="getOption()"> Check option </button>
<script type="text/javascript">
function getOption() {
selectElement =
document.querySelector('#select1');
output = selectElement.value;
document.querySelector('.output').textContent = output;
}
</script>
</body>
</html>
Output:
value property
How to get selected value in dropdown list using JavaScript ?
Dropdown lists (also known as select elements) are commonly used in web forms to allow users to choose from a predefined set of options. When a user selects an option from the dropdown, we often need to retrieve the chosen value programmatically.
The dropdown list is created using the <select> tab with <option> tab and for selecting the value we will use the below methods.
We can get the values using the below methods:
Table of Content
- Using the value property
- Using the selectedIndex property
- Using the jQuery val() method