{"id":837,"date":"2012-06-07T14:01:56","date_gmt":"2012-06-07T14:01:56","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=837"},"modified":"2012-06-07T14:01:56","modified_gmt":"2012-06-07T14:01:56","slug":"jquery-select-value-get-select-value-with-jquery-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-select-value-get-select-value-with-jquery-examples\/","title":{"rendered":"jQuery Get Select Value Examples"},"content":{"rendered":"

Have you wondered how to use jQuery to\u00a0<\/strong>get Select value<\/strong><\/em>? The select value can be easily obtained by using just single line of code. Follow along for more info.<\/p>\n

How to Get Select Value with jQuery<\/h2>\n

Let’s assume that you have a Select with ID “states”. You can now get the selected option value using jQuery in the following ways:<\/p>\n

Here is the HTML source for the following example:<\/strong><\/p>\n

<select name=\"states\" id=\"states\">\n<option value=\"Texas\">Texas<\/option>\n<option value=\"Alabama\">Alabama<\/option>\n<option value=\"Chicago\">Chicago<\/option>\n<\/select><\/pre>\n
Example 1: Get Select value using val() on page load using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\nvar value = $(\"#states\").val();\n\nalert(value);\n\n});\n\n<\/script><\/pre>\n
When you execute the above code, you will see a JavaScript alert the value of the first option as the selected . To assign some value to the Select and get it’s value when the page loads, try the HTML source below and execute the code:<\/p>\n
Here is the HTML source for the following example:<\/strong><\/strong><\/p>\n
<select name=\"states\" id=\"states\">\n<option value=\"Texas\">Texas<\/option>\n<option value=\"Alabama\">Alabama<\/option>\n<option value=\"Chicago\" selected=\"selected\">Chicago<\/option>\n<\/select><\/pre>\n
You will now see that the JavaScript alert says: Chicago<\/p>\n
So that’s how you can get Selected option value on document load.<\/p>\n
Example 2: Get Select value when it’s value on change using change() in jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#states\").change(function(){\n\nvar value = $(this).val();\n\nalert(value);\n\n});\n\n});\n\n<\/script><\/pre>\n
What the above jQuery does is that it alerts the value of the Selected option as soon as a different option is selected, without any delay.<\/p>\n
Example 3: Get Select value using it’s name attribute using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"input[name='states']\").change(function(){\n\nvar value = $(this).val();\n\nalert(value);\n\n});\n\n});\n\n<\/script><\/pre>\n
If you have noticed, I am targeting the Select by using it’s name in the above code. That’s how you can get Select value using name in jQuery.<\/p>\n
Example 4: Get Select value using it’s Class using jQuery<\/h3>\n
HTML Source:<\/strong><\/p>\n
<input name=\"states\" type=\"text\" id=\"states\" class=\"states_class\" \/><\/pre>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\".states_class\").change(function(){\n\nvar value = $(this).val();\n\nalert(value);\n\n});\n\n});\n\n<\/script><\/pre>\n
In the above code, the Select is targeted using the “states_class” applied to the Select. So now whenever the content of the “states” Select is changed, its value will be shown in alert.<\/p>\n
Example 5: Get Select value using blur() using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#states\").blur(function(){\n\nvar value = $(this).val();\n\nalert(value);\n\n});\n\n});\n\n<\/script><\/pre>\n
What the above jQuery does is that it alerts the value of the Select instanlty as it is changed. This works same as the change() method in this context.<\/p>\n
That’s it for now!<\/h5>\n
Do you know of any other ways to get Select value using jQuery or to get selected value of select dropdown using jQuery<\/strong><\/em>? Feel free to share by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Have you wondered how to use jQuery to\u00a0get Select value? The select value can be easily obtained by using just single line of code. Follow along for more info.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[41],"class_list":["post-837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-dv","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=837"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/837\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}