How to use the jQuery val() method In Javascript
jQuery is a JavaScript library whose val() method can be used to get the value of the selected dropdown item.
Syntax:
selectedSelectElement.val();
Example: The below code explains the use of the jQuery val() method to get the value of the selected 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 src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<script type="text/javascript">
function getOption() {
const output = $('#select1').val();
$('.output').text(output);
}
</script>
</body>
</html>
Output:
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