{"id":6239,"date":"2024-12-27T08:58:59","date_gmt":"2024-12-27T08:58:59","guid":{"rendered":"https:\/\/ubiq.co\/tech-blog\/?p=6239"},"modified":"2025-09-03T05:54:23","modified_gmt":"2025-09-03T05:54:23","slug":"how-to-get-selected-text-from-dropdown-list-in-jquery","status":"publish","type":"post","link":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/","title":{"rendered":"How to Get Selected Text from Dropdown List in jQuery"},"content":{"rendered":"\n<p>Most websites and apps these days use dropdown menus in forms to allow users to pick from a choice of options. During form submission, web developers need to be able to retrieve the selected option from dropdown. There are many different ways to do this using plain JavaScript as well as third party libraries like jQuery. But jQuery makes it really easy as you will see below. This is because it provides many out-of-the-box functions built specifically for this purpose. In this article, we will learn how to get selected text from dropdown list in jQuery.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#How_to_Get_Selected_Text_from_Dropdown_List_in_jQuery\" >How to Get Selected Text from Dropdown List in jQuery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#1_Using_text\" >1. Using text()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#2_Using_val\" >2. Using val()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#3_Multiple_Dropdowns\" >3. Multiple Dropdowns<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#4_On_Event\" >4. On Event<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#5_Dynamic_Dropdowns\" >5. Dynamic Dropdowns<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#6_For_div_based_dropdowns\" >6. For div based dropdowns<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Get_Selected_Text_from_Dropdown_List_in_jQuery\"><\/span>How to Get Selected Text from Dropdown List in jQuery<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let us say you have the following dropdown menu. We have also included a link which we will use in later examples.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;select id=\"my_dropdown\" class=\"dropdown_class\" name=\"dropdown_name\"&gt;<br>  &lt;option value=\"volvo\"&gt;Volvo&lt;\/option&gt;<br>  &lt;option value=\"mercedes\"&gt;Mercedes&lt;\/option&gt;<br>  &lt;option value=\"audi\"&gt;Audi&lt;\/option&gt;<br>&lt;\/select&gt;<br><br>&lt;a id='my_button'&gt;click me&lt;\/a&gt;<\/pre>\n\n\n\n<p>jQuery provides two main functions text() and val() to easily get the text and value of selected dropdown option.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Using_text\"><\/span>1. Using text()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You can call text() option on any HTML element. It will return the inner HTML text of that element. We will use it to retrieve the text of selected dropdown option. There are several ways to target the selected dropdown option in jQuery. On each of these options, you can call text() function.<\/p>\n\n\n\n<p>Whenever a dropdown option is selected, a &#8216;selected&#8217; attribute will automatically be added to that option. We will use this attribute to pick the correct option.<\/p>\n\n\n\n<p>Here is the simplest way to get the selected option of your dropdown.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(\"#my_dropdown option:selected\").text();<\/pre>\n\n\n\n<p>In the above code, we select the dropdown using its ID attribute. We also add &#8216;option:selected&#8217; filter after it, to pick the selected option. On this element, we call text() function.<\/p>\n\n\n\n<p>You may also drop &#8216;option&#8217; keyword from the above selector, as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(\"#my_dropdown option:selected\").text();<\/pre>\n\n\n\n<p>If you are using an older version of jQuery, you may need to use find() function explicitly to determine the selected option.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#my_dropdown').find('option:selected').text();<br>OR<br>$('#my_dropdown').find(':selected').text();<\/pre>\n\n\n\n<p>If your dropdown option is present in a variable my_var, then you can pick the selected option as shown.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(\"option:selected\", my_var).text()<\/pre>\n\n\n\n<p>In a dropdown menu, the options are considered as the children element of select dropdown. So you can also use children() function to pick the selected option&#8217;s text().<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(\"#my_dropdown\").children(\":selected\").text();<br>OR<br>$(\"#my_dropdown\").children(\"option\").filter(\":selected\").text();<\/pre>\n\n\n\n<p>In all the above cases, you will notice that we are simply changing the jQuery selector in different ways to target the selected dropdown option.<\/p>\n\n\n\n<p>Please note, if you call text() function on the dropdown menu only, then it will return a list of the text of all options in the dropdown.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#my_dropdown').text(); \/\/ output is Volvo Mercedes Audi<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Using_val\"><\/span>2. Using val()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>jQuery also provides val() function that fetches the value attribute of the selected option. It will not return the inner HTML text as text() function. Nevertheless, its syntax is similar to that of text() function. Use a jQuery selector to target the selected option, and call val() function on the element.<\/p>\n\n\n\n<p>As in case of text() function, you can call it on the dropdown directly, or by adding &#8216;option:selected&#8217; option, or by simply adding :selected filter after the ID of dropdown.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#my_dropdown').val();<br>or<br>$('#my_dropdown option:selected').val();<br>or<br>$('#my_dropdown :selected').val();<\/pre>\n\n\n\n<p>If you use old jQuery versions, then adding &#8216;option:selected&#8217; or &#8216;:selected&#8217; after the ID attribute of dropdown may not work. In such cases, you will need to use find() function with &#8216;option:selected&#8217; or &#8216;:selected&#8217; filters to pick the selected option.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#my_dropdown').find('option:selected').val();<br>OR<br>$('#my_dropdown').find(':selected').val();<\/pre>\n\n\n\n<p>As mentioned earlier, each dropdown option is a child element of the actual select dropdown. So you can use children() function to find the selected option.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(\"#my_dropdown\").children(\":selected\").val();<br>OR<br>$(\"#my_dropdown\").children(\"option\").filter(\":selected\").val();<\/pre>\n\n\n\n<p>Like in case of text() function, we are simply changing jQuery selectors to target the selected option in different ways and call val() function on them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Multiple_Dropdowns\"><\/span>3. Multiple Dropdowns<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>So far, we have learnt how to call text() and val() functions on single select dropdowns using its ID attribute. Let us look at several other ways to do it. You can also select dropdown using its class attribute as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('.dropdown_class option:selected').val();<\/pre>\n\n\n\n<p>Please note, if there is only a single select dropdown with class=&#8217;dropdown_class&#8217; then you will directly get the selected option&#8217;s value using the above code. But if there are multiple dropdowns with same class name, then the jQuery selector will return multiple results. In this case, you will need to loop through each element in the result, to get selected option of each dropdown. For example, let us say you have the following 2 dropdowns with same class name but different ID.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;select id=\"<strong>my_dropdown<\/strong>\" class=\"dropdown_class\" name=\"dropdown_name\"&gt;<br>  &lt;option value=\"volvo\"&gt;Volvo&lt;\/option&gt;<br>  &lt;option value=\"mercedes\"&gt;Mercedes&lt;\/option&gt;<br>  &lt;option value=\"audi\"&gt;Audi&lt;\/option&gt;<br>&lt;\/select&gt;<br><br>&lt;select id=\"<strong>my_dropdown2<\/strong>\" class=\"dropdown_class\" name=\"dropdown_name\"&gt;<br>  &lt;option value=\"volvo\"&gt;Volvo&lt;\/option&gt;<br>  &lt;option value=\"mercedes\"&gt;Mercedes&lt;\/option&gt;<br>  &lt;option value=\"audi\"&gt;Audi&lt;\/option&gt;<br>&lt;\/select&gt;<\/pre>\n\n\n\n<p>If you want to get the selected option of each dropdown, you will need to iterate over each select dropdown and separately get their selected option. On each dropdown&#8217;s selected option, you may call val() or text() function as required.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('.dropdown_class :selected').each(function(){<br>    alert($(this).val());<br>});<br><br>OR<br><br>$('.dropdown_class :selected').each(function(){<br>    alert($(this).text());<br>});<\/pre>\n\n\n\n<p>Similarly, you can also select dropdowns using their name attribute.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('select[name=\"dropdown_name\"] :selected').val();<br>OR<br>$('select[name=\"dropdown_name\"] :selected').text();<\/pre>\n\n\n\n<p>In the above case, there is only one dropdown on our page with the given name attribute. So you will directly get the selected option. But there can be multiple dropdowns on a page with same name. In this case also, you will need to loop through the select dropdowns on the page, with the given name, and for each select, pick the selected option.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('select[name=\"dropdown_name\"] :selected').each(function(){<br>      alert($(this).val());<br>});<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_On_Event\"><\/span>4. On Event<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Each of the above code can also be added inside event handlers for elements. Here is an example to display selected option&#8217;s text, on clicking the link with ID=my_button<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#my_button').click(function(){<br>\talert($('#my_dropdown :selected').val());<br>\t});<br>  });<\/pre>\n\n\n\n<p>Similarly, you can add these code snippets to other event handlers such as change, on hover, etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Dynamic_Dropdowns\"><\/span>5. Dynamic Dropdowns<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>So far all the examples we have seen are related to dropdowns that already exist on a web page. But sometimes, you may need to dynamically add dropdowns to your pages. This is especially true, if you are adding a dropdown as a result of an AJAX function call. In such cases, the above solutions will not work directly. You will need to add them inside the on() function provided by jQuery to deal with dynamic elements. Here is an example to illustrate it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(document).on(\"change\", \"#my_dropdown\", function() {<br>          alert($(this).find(\"option:selected\").text()); <br>});<\/pre>\n\n\n\n<p>In the above code, we call on() function on document object, which will track all dynamic objects on the web page. Further, we specify the &#8216;change&#8217; event that is triggered when user selects a dropdown. Lastly, we provide the ID of dropdown element. This will narrow down our selection to the desired dropdown. In our jQuery function, we simply call text() function on the selected option of dropdown and display its value.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_For_div_based_dropdowns\"><\/span>6. For div based dropdowns<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Although we have used a dropdown using select tag, you can also use them on <a href=\"https:\/\/www.w3schools.com\/howto\/howto_js_dropdown.asp\" target=\"_blank\" rel=\"noreferrer noopener\">dropdowns created using div tag<\/a>, with anchor links for each dropdown. You just need to replace &#8216;option&#8217; with &#8216;a&#8217; in the above code snippets. This is because typical dropdowns are created with select tag, with option tag for each option. Sometimes dropdowns are created using div tag, with anchor(a) tag for each option.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this article, we have learnt many different ways to get selected dropdown option using jQuery. If you want the inner HTML text of selected option, use text() function. If you want the value attribute of selected option, use val() function. We have tried to cover as many different use cases as possible, for your benefit. You can use any of these solutions as per your requirement.<\/p>\n\n\n\n<p>Also read:<\/p>\n\n\n\n<p><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-store-objects-in-html5-local-storage-session-storage\/\">How to Store Objects in HTML5 Local\/Session Storage<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-remove-duplicate-values-from-js-array\/\">How to Remove Duplicate Values from JS Array<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-disable-browser-autocomplete-and-autofill\/\">How to Disable Browser AutoFill and AutoComplete<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Often we need to get selected value from dropdown. Here is how to get selected text from dropdown list in jQuery.<\/p>\n","protected":false},"author":1,"featured_media":6268,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[350],"tags":[366],"class_list":["post-6239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-selected-dropdown"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Get Selected Text from Dropdown List in jQuery - Ubiq BI<\/title>\n<meta name=\"description\" content=\"Often we need to get selected value from dropdown. Here is how to get selected text from dropdown list in jQuery.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Get Selected Text from Dropdown List in jQuery - Ubiq BI\" \/>\n<meta property=\"og:description\" content=\"Often we need to get selected value from dropdown. Here is how to get selected text from dropdown list in jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Ubiq BI\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ubiqbi\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-27T08:58:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-03T05:54:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/get-selected-dropdown-option.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"278\" \/>\n\t<meta property=\"og:image:height\" content=\"185\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sreeram Sreenivasan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:site\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sreeram Sreenivasan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/\"},\"author\":{\"name\":\"Sreeram Sreenivasan\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\"},\"headline\":\"How to Get Selected Text from Dropdown List in jQuery\",\"datePublished\":\"2024-12-27T08:58:59+00:00\",\"dateModified\":\"2025-09-03T05:54:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/\"},\"wordCount\":1215,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/get-selected-dropdown-option.jpg?fit=278%2C185&ssl=1\",\"keywords\":[\"selected dropdown\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/\",\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/\",\"name\":\"How to Get Selected Text from Dropdown List in jQuery - Ubiq BI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/get-selected-dropdown-option.jpg?fit=278%2C185&ssl=1\",\"datePublished\":\"2024-12-27T08:58:59+00:00\",\"dateModified\":\"2025-09-03T05:54:23+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\"},\"description\":\"Often we need to get selected value from dropdown. Here is how to get selected text from dropdown list in jQuery.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/get-selected-dropdown-option.jpg?fit=278%2C185&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/get-selected-dropdown-option.jpg?fit=278%2C185&ssl=1\",\"width\":278,\"height\":185,\"caption\":\"get selected dropdown option\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-get-selected-text-from-dropdown-list-in-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Get Selected Text from Dropdown List in jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#website\",\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/\",\"name\":\"Ubiq BI\",\"description\":\"Build dashboards &amp; reports in minutes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\",\"name\":\"Sreeram Sreenivasan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"caption\":\"Sreeram Sreenivasan\"},\"description\":\"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sreeram-sreenivasan\\\/\"],\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/author\\\/wordpress\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Get Selected Text from Dropdown List in jQuery - Ubiq BI","description":"Often we need to get selected value from dropdown. Here is how to get selected text from dropdown list in jQuery.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/","og_locale":"en_US","og_type":"article","og_title":"How to Get Selected Text from Dropdown List in jQuery - Ubiq BI","og_description":"Often we need to get selected value from dropdown. Here is how to get selected text from dropdown list in jQuery.","og_url":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/","og_site_name":"Ubiq BI","article_publisher":"https:\/\/www.facebook.com\/ubiqbi","article_published_time":"2024-12-27T08:58:59+00:00","article_modified_time":"2025-09-03T05:54:23+00:00","og_image":[{"width":278,"height":185,"url":"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/get-selected-dropdown-option.jpg","type":"image\/jpeg"}],"author":"Sreeram Sreenivasan","twitter_card":"summary_large_image","twitter_creator":"@UbiqBI","twitter_site":"@UbiqBI","twitter_misc":{"Written by":"Sreeram Sreenivasan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#article","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/"},"author":{"name":"Sreeram Sreenivasan","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"headline":"How to Get Selected Text from Dropdown List in jQuery","datePublished":"2024-12-27T08:58:59+00:00","dateModified":"2025-09-03T05:54:23+00:00","mainEntityOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/"},"wordCount":1215,"commentCount":0,"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/get-selected-dropdown-option.jpg?fit=278%2C185&ssl=1","keywords":["selected dropdown"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/","url":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/","name":"How to Get Selected Text from Dropdown List in jQuery - Ubiq BI","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#primaryimage"},"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/get-selected-dropdown-option.jpg?fit=278%2C185&ssl=1","datePublished":"2024-12-27T08:58:59+00:00","dateModified":"2025-09-03T05:54:23+00:00","author":{"@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"description":"Often we need to get selected value from dropdown. Here is how to get selected text from dropdown list in jQuery.","breadcrumb":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#primaryimage","url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/get-selected-dropdown-option.jpg?fit=278%2C185&ssl=1","contentUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/get-selected-dropdown-option.jpg?fit=278%2C185&ssl=1","width":278,"height":185,"caption":"get selected dropdown option"},{"@type":"BreadcrumbList","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ubiq.co\/tech-blog\/"},{"@type":"ListItem","position":2,"name":"How to Get Selected Text from Dropdown List in jQuery"}]},{"@type":"WebSite","@id":"https:\/\/ubiq.co\/tech-blog\/#website","url":"https:\/\/ubiq.co\/tech-blog\/","name":"Ubiq BI","description":"Build dashboards &amp; reports in minutes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ubiq.co\/tech-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc","name":"Sreeram Sreenivasan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","caption":"Sreeram Sreenivasan"},"description":"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.","sameAs":["https:\/\/www.linkedin.com\/in\/sreeram-sreenivasan\/"],"url":"https:\/\/ubiq.co\/tech-blog\/author\/wordpress\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/get-selected-dropdown-option.jpg?fit=278%2C185&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pbGGTT-1CD","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/6239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/comments?post=6239"}],"version-history":[{"count":36,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/6239\/revisions"}],"predecessor-version":[{"id":6277,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/6239\/revisions\/6277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media\/6268"}],"wp:attachment":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media?parent=6239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/categories?post=6239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/tags?post=6239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}