How to get Text Value of Selected Option from Dropdown in jQuery?
Answer: We can use the find(":selected") method to find the selected option and then the text() method to get the text name in jQuery
If you want to get the text for the selected option from HTML select box dropdown or if you want to get the value for the selected option, we can use the find() function to look for the selected option and then either get the text value using the text() function or et its value using the val() function.
If you are confused between text and value, let's clear that doubt first.
This is how you define a select box in HTML.
<select id="selectBox">
<option>Choose option...</option>
<option value="Wa">Water</option>
<option value="F">Fire</option>
<option value="Wi">Wind</option>
<option value="W">Earth</option>
</select>
In the above select box, you can see multiple values. The text between the the opening and closing <option> tags is referred to as the option text, whereas the value attribute is used to assign a value to each option.
In this tutorial, we will learn how to get both, text and value, from a selected option in dropown.
Get Text of the Selected Option
To get the text of the selected option, we first need to find the selected option using the find() method and then use the text() method to get the option text.
Here is an example,
<!doctype html>
<head>
<title>Get Selected option Value</title>
</head>
<body>
<div>
<select id="selectBox">
<option>Choose option...</option>
<option value="Wa">Water</option>
<option value="F">Fire</option>
<option value="Wi">Wind</option>
<option value="W">Earth</option>
</select>
</div>
<br/>
<div>
<button id="textBtn">Find Text</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#textBtn").on('click', function(){
alert($("#selectBox").find(":selected").text());
});
</script>
</body>
</html>
Here is a live running example for the above code. (In the live example you will find the below code too)
This is the main jQuery part of the code:
$("#selectBox").find(":selected").text()
where selectBox is the value of the id attribute of the <select> HTML tag.
Get Value of the Selected Option
To get the value of the selected option, we have to find the selected option using the find() method and then use the val() method to get the value of the option.
Here is a working code example,
<!doctype html>
<head>
<title>Get Selected option Value</title>
</head>
<body>
<div>
<select id="selectBox">
<option>Choose option...</option>
<option value="Wa">Water</option>
<option value="F">Fire</option>
<option value="Wi">Wind</option>
<option value="W">Earth</option>
</select>
</div>
<br/>
<div>
<button id="valueBtn">Find Value</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#valueBtn").on('click', function(){
alert($("#selectBox").find(":selected").val());
});
</script>
</body>
</html>
This is the main jQuery part of the code:
$("#selectBox").find(":selected").val()
Frequently Asked Questions:
Here are some frequently asked questions to help you.
What is the val() function in jQuery for?
The val() function in jQuery is used to get the value of the value attribute for any HTML form related tag like the input tag, select tag, etc.
How to use jQuery in my code?
You can directly use the CDN link to add the jQuery script to your HTML code using the HTML script tag.
Here is an example,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Copy and paste this code in the head section of your HTML code or in the body section. In the above code, we have imported the jQuery version 3.6.0 into our HTML code.
