Get selected text and value from Drop Down List in ASP.Net using jQuery

You want to get the selected text and value from DropDownList control of ASP.Net using jQuery.

Sidenote: Complete code is available at the bottom of the article. But I recommend you to read the article completely for better understanding.

Every item in the drop down list has 2 parameters – Text and Value. In the below drop down list, 1^st item has China as text and 1 as value. 2^nd item has India as text and 2 as value and so on.

Below is the ASPX markup for the same.

<asp:DropDownList ID="ddlCountries" runat="server">

<asp:ListItem Text="China" Value="1"></asp:ListItem>

<asp:ListItem Text="India" Value="2"></asp:ListItem>

<asp:ListItem Text="United States" Value="3"></asp:ListItem>

<asp:ListItem Text="Indonesia" Value="4"></asp:ListItem>

<asp:ListItem Text="Brazil" Value="5"></asp:ListItem>

</asp:DropDownList>

Now, our objective is to get the text and value of the selected item in DropDownList using jQuery.  Before seeing on how to achieve the same, let us revisit some of the basics.

You want to get the selected text and value of DropDownList using jQuery.

But jQuery, a javascript library, resides at the browser side.

And, browsers can only understand HTML,CSS and Javascript.

Dropdownlist is a ASP.Net server control and it has to be converted to corresponding html elements so that browsers can understand

So DropDownList will be converted to html with select and option html elements.

Browsers can’t understand DropDownList Control. It knows only Select and Option html elements.

See the below picture for more details.

Getting the selected value of dropdownlist:

At any point in time, only one item in the dropdown list can be selected. You want to get the selected value.

As there could be multiple drop down lists in the same form, first we need to select the drop down list uniquely and get the value using the val function of jQuery

You can use the below expression to get the selected value of drop down list

$("#ddlCountries").val()

Getting the selected text of dropdownlist:

When you change the item, the option of the selected item will have an attribute selected with value also as selected. This means that option is currently selected in the drop down list.

When you select “United States”, below would be markup change in the html.

<option selected="selected" value="3">United States</option>

So you can use the below code to get the selected text. We are selecting the element by id(#ddlCountries) and we are getting the element whose option is selected.Then we are getting the text of that element.

$("#ddlCountries option:selected").text();

Complete Code:

<script type="text/javascript">

function getSelectedValue() {

alert($("#ddlCountries").val());

}

function getSelectedText() {

alert($("#ddlCountries option:selected").text());

}

</script>

<asp:DropDownList ID="ddlCountries" runat="server">

<asp:ListItem Text="China" Value="1"></asp:ListItem>

<asp:ListItem Text="India" Value="2"></asp:ListItem>

<asp:ListItem Text="United States" Value="3"></asp:ListItem>

<asp:ListItem Text="Indonesia" Value="4"></asp:ListItem>

<asp:ListItem Text="Brazil" Value="5"></asp:ListItem>

</asp:DropDownList>

&nbsp;

<asp:Button ID="btnValue" runat="server" Text="Get Selected Value" OnClientClick="return getSelectedValue();" />

<asp:Button ID="btnText" runat="server" Text="Get Selected Text"  OnClientClick="return getSelectedText();" />

Thanks for reading the article. If you like this article, please subscribe.