HTML For example, a dropdown may display In this guide, we will show how to get the selected text and value from a drop-down list using jQuery.<\/p>\n\n\n\n Before following this guide, you should have:<\/p>\n\n\n\n You can use a current jQuery release from the official jQuery CDN:<\/p>\n\n\n\n Create a The For example:<\/p>\n\n\n\n Here:<\/p>\n\n\n\n Use the jQuery This returns the text displayed by the selected option.<\/p>\n\n\n\n To retrieve the value of the selected option, use The following example retrieves both the selected text and value when the button is clicked:<\/p>\n\n\n\n When Basic Plan<\/strong> is selected, the result will be:<\/p>\n\n\n\n If you want to retrieve the selected text and value immediately whenever the user changes the dropdown, use the This approach is useful when the application needs to perform an action immediately after the user selects an option.<\/p>\n\n\n\n jQuery provides a simple way to retrieve both the displayed text and the underlying value of a selected drop-down option.<\/p>\n\n\n\n To get the selected text:<\/p>\n\n\n\n To get the selected value:<\/p>\n\n\n\n These methods can be used with button clicks, change events, forms, and other interactive web application functionality.<\/p>\n\n\n\n Use:<\/p>\n\n\n\n This returns the text displayed for the currently selected option.<\/p>\n\n\n\n Use:<\/p>\n\n\n\n This returns the <select><\/code> 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<\/strong> and its value<\/strong> using JavaScript or jQuery.<\/p>\n\n\n\nBasic Plan<\/code> to the user while its underlying value is 601<\/code>. jQuery provides simple methods to retrieve both pieces of information from the selected option.<\/p>\n\n\n\nPrerequisites<\/h2>\n\n\n\n
\n
<script src=\"https:\/\/code.jquery.com\/jquery-3.7.1.min.js\"><\/script><\/pre>\n\n\n\n
Implementation<\/h2>\n\n\n\n
Step 1: Create the HTML Drop-Down List<\/h3>\n\n\n\n
<select><\/code> element with multiple options:<\/p>\n\n\n\n<select name=\"select_text\" id=\"select_text\">\n <option value=\"\">Select Plan<\/option>\n <option value=\"601\">Basic Plan<\/option>\n <option value=\"602\">Premium Plan<\/option>\n<\/select>\n\n<button type=\"button\" id=\"get-text\">Get Selected Value<\/button><\/pre>\n\n\n\n
value<\/code> attribute contains the value associated with each option, while the text between the <option><\/code> tags is displayed to the user.<\/p>\n\n\n\n<option value=\"601\">Basic Plan<\/option><\/pre>\n\n\n\n
\n
Basic Plan<\/code><\/li>\n\n\n\n601<\/code><\/li>\n<\/ul>\n\n\n\nStep 2: Get the Selected Text<\/h3>\n\n\n\n
:selected<\/code> selector together with .text()<\/code>:<\/p>\n\n\n\nconst selectedText = $(\"#select_text option:selected\").text();\n\nalert(\"Text: \" + selectedText);<\/pre>\n\n\n\n
Step 3: Get the Selected Value<\/h3>\n\n\n\n
.val()<\/code>:<\/p>\n\n\n\nconst selectedValue = $(\"#select_text\").val();\n\nalert(\"Value: \" + selectedValue);<\/pre>\n\n\n\n
Step 4: Get Both Text and Value<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Get Selected Text and Value Using jQuery<\/title>\n\n <script src=\"https:\/\/code.jquery.com\/jquery-3.7.1.min.js\"><\/script>\n<\/head>\n<body>\n\n<select name=\"select_text\" id=\"select_text\">\n <option value=\"\">Select Plan<\/option>\n <option value=\"601\">Basic Plan<\/option>\n <option value=\"602\">Premium Plan<\/option>\n<\/select>\n\n<button type=\"button\" id=\"get-text\">Get Selected Value<\/button>\n\n<script>\n$(function () {\n $(\"#get-text\").on(\"click\", function () {\n const selectedText = $(\"#select_text option:selected\").text();\n const selectedValue = $(\"#select_text\").val();\n\n alert(\"Text: \" + selectedText);\n alert(\"Value: \" + selectedValue);\n });\n});\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\nText: Basic Plan\nValue: 601<\/pre>\n\n\n\n
Step 5: Get the Selected Option on Change<\/h3>\n\n\n\n
change<\/code> event:<\/p>\n\n\n\n$(\"#select_text\").on(\"change\", function () {\n const selectedText = $(this).find(\"option:selected\").text();\n const selectedValue = $(this).val();\n\n console.log(\"Text:\", selectedText);\n console.log(\"Value:\", selectedValue);\n});<\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n
$(\"#select_text option:selected\").text();<\/pre>\n\n\n\n
$(\"#select_text\").val();<\/pre>\n\n\n\n
Frequently Asked Questions<\/h2>\n\n\n\n
1. How do I get the selected text from a dropdown using jQuery?<\/h3>\n\n\n\n
$(\"#select_text option:selected\").text();<\/pre>\n\n\n\n
2. How do I get the selected value from a dropdown using jQuery?<\/h3>\n\n\n\n
$(\"#select_text\").val();<\/pre>\n\n\n\n
value<\/code> attribute of the selected option.<\/p>\n\n\n\nRelated Article <\/h2>\n\n\n\n