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.
How to Get Selected Text from Dropdown List in jQuery
Let us say you have the following dropdown menu. We have also included a link which we will use in later examples.
<select id="my_dropdown" class="dropdown_class" name="dropdown_name">
<option value="volvo">Volvo</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<a id='my_button'>click me</a>
jQuery provides two main functions text() and val() to easily get the text and value of selected dropdown option.
1. Using text()
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.
Whenever a dropdown option is selected, a ‘selected’ attribute will automatically be added to that option. We will use this attribute to pick the correct option.
Here is the simplest way to get the selected option of your dropdown.
$("#my_dropdown option:selected").text();
In the above code, we select the dropdown using its ID attribute. We also add ‘option:selected’ filter after it, to pick the selected option. On this element, we call text() function.
You may also drop ‘option’ keyword from the above selector, as shown below.
$("#my_dropdown option:selected").text();
If you are using an older version of jQuery, you may need to use find() function explicitly to determine the selected option.
$('#my_dropdown').find('option:selected').text();
OR
$('#my_dropdown').find(':selected').text();
If your dropdown option is present in a variable my_var, then you can pick the selected option as shown.
$("option:selected", my_var).text()
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’s text().
$("#my_dropdown").children(":selected").text();
OR
$("#my_dropdown").children("option").filter(":selected").text();
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.
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.
$('#my_dropdown').text(); // output is Volvo Mercedes Audi
2. Using val()
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.
As in case of text() function, you can call it on the dropdown directly, or by adding ‘option:selected’ option, or by simply adding :selected filter after the ID of dropdown.
$('#my_dropdown').val();
or
$('#my_dropdown option:selected').val();
or
$('#my_dropdown :selected').val();
If you use old jQuery versions, then adding ‘option:selected’ or ‘:selected’ after the ID attribute of dropdown may not work. In such cases, you will need to use find() function with ‘option:selected’ or ‘:selected’ filters to pick the selected option.
$('#my_dropdown').find('option:selected').val();
OR
$('#my_dropdown').find(':selected').val();
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.
$("#my_dropdown").children(":selected").val();
OR
$("#my_dropdown").children("option").filter(":selected").val();
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.
3. Multiple Dropdowns
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.
$('.dropdown_class option:selected').val();
Please note, if there is only a single select dropdown with class=’dropdown_class’ then you will directly get the selected option’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.
<select id="my_dropdown" class="dropdown_class" name="dropdown_name">
<option value="volvo">Volvo</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="my_dropdown2" class="dropdown_class" name="dropdown_name">
<option value="volvo">Volvo</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
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’s selected option, you may call val() or text() function as required.
$('.dropdown_class :selected').each(function(){
alert($(this).val());
});
OR
$('.dropdown_class :selected').each(function(){
alert($(this).text());
});
Similarly, you can also select dropdowns using their name attribute.
$('select[name="dropdown_name"] :selected').val();
OR
$('select[name="dropdown_name"] :selected').text();
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.
$('select[name="dropdown_name"] :selected').each(function(){
alert($(this).val());
});
4. On Event
Each of the above code can also be added inside event handlers for elements. Here is an example to display selected option’s text, on clicking the link with ID=my_button
$('#my_button').click(function(){
alert($('#my_dropdown :selected').val());
});
});
Similarly, you can add these code snippets to other event handlers such as change, on hover, etc.
5. Dynamic Dropdowns
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.
$(document).on("change", "#my_dropdown", function() {
alert($(this).find("option:selected").text());
});
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 ‘change’ 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.
6. For div based dropdowns
Although we have used a dropdown using select tag, you can also use them on dropdowns created using div tag, with anchor links for each dropdown. You just need to replace ‘option’ with ‘a’ 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.
Conclusion
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.
Also read:
How to Store Objects in HTML5 Local/Session Storage
How to Remove Duplicate Values from JS Array
How to Disable Browser AutoFill and AutoComplete
Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI & software development.