Introduction
HTML <select> elements are commonly used to display a list of options from which users can select a value. In many web applications, you may need to retrieve both the selected option’s text and its value using JavaScript or jQuery.
For example, a dropdown may display Basic Plan to the user while its underlying value is 601. jQuery provides simple methods to retrieve both pieces of information from the selected option.
In this guide, we will show how to get the selected text and value from a drop-down list using jQuery.
Prerequisites
Before following this guide, you should have:
- Basic knowledge of HTML.
- Basic knowledge of JavaScript and jQuery.
- A web browser for testing the example.
- jQuery included in your HTML page.
You can use a current jQuery release from the official jQuery CDN:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
Implementation
Step 1: Create the HTML Drop-Down List
Create a <select> element with multiple options:
<select name="select_text" id="select_text">
<option value="">Select Plan</option>
<option value="601">Basic Plan</option>
<option value="602">Premium Plan</option>
</select>
<button type="button" id="get-text">Get Selected Value</button>
The value attribute contains the value associated with each option, while the text between the <option> tags is displayed to the user.
For example:
<option value="601">Basic Plan</option>
Here:
- Selected text:
Basic Plan - Selected value:
601
Step 2: Get the Selected Text
Use the jQuery :selected selector together with .text():
const selectedText = $("#select_text option:selected").text();
alert("Text: " + selectedText);
This returns the text displayed by the selected option.
Step 3: Get the Selected Value
To retrieve the value of the selected option, use .val():
const selectedValue = $("#select_text").val();
alert("Value: " + selectedValue);
Step 4: Get Both Text and Value
The following example retrieves both the selected text and value when the button is clicked:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Selected Text and Value Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<select name="select_text" id="select_text">
<option value="">Select Plan</option>
<option value="601">Basic Plan</option>
<option value="602">Premium Plan</option>
</select>
<button type="button" id="get-text">Get Selected Value</button>
<script>
$(function () {
$("#get-text").on("click", function () {
const selectedText = $("#select_text option:selected").text();
const selectedValue = $("#select_text").val();
alert("Text: " + selectedText);
alert("Value: " + selectedValue);
});
});
</script>
</body>
</html>
When Basic Plan is selected, the result will be:
Text: Basic Plan Value: 601
Step 5: Get the Selected Option on Change
If you want to retrieve the selected text and value immediately whenever the user changes the dropdown, use the change event:
$("#select_text").on("change", function () {
const selectedText = $(this).find("option:selected").text();
const selectedValue = $(this).val();
console.log("Text:", selectedText);
console.log("Value:", selectedValue);
});
This approach is useful when the application needs to perform an action immediately after the user selects an option.
Conclusion
jQuery provides a simple way to retrieve both the displayed text and the underlying value of a selected drop-down option.
To get the selected text:
$("#select_text option:selected").text();
To get the selected value:
$("#select_text").val();
These methods can be used with button clicks, change events, forms, and other interactive web application functionality.
Frequently Asked Questions
1. How do I get the selected text from a dropdown using jQuery?
Use:
$("#select_text option:selected").text();
This returns the text displayed for the currently selected option.
2. How do I get the selected value from a dropdown using jQuery?
Use:
$("#select_text").val();
This returns the value attribute of the selected option.
Related Article
How to Check or Uncheck a Checkbox with jQuery
Talk to our experts:
Our DevOps experts can help with cloud infrastructure, server management, automation, and other DevOps requirements. Get in touch with our team here.