In this article I will explain how to get Text and Value of selected Item (Option) of ASP.Net DropDownList on Button click using JavaScript and jQuery.
Get selected Text and Value of ASP.Net DropDownList on Button click using JavaScript
The following HTML Markup consists of an ASP.Net DropDownList and a Button. The Button has been assigned a JavaScript OnClick event handler.
When the Button is clicked, the GetSelectedTextValue JavaScript function is executed.
Inside the function, the ASP.Net DropDownList object is referenced and then the selected Text and Value is determined and displayed using JavaScript alert message box.
<asp:DropDownList ID="ddlFruits" runat="server">
<asp:ListItem Text="Please Select" Value=""></asp:ListItem>
<asp:ListItem Text="Mango" Value="1"></asp:ListItem>
<asp:ListItem Text="Apple" Value="2"></asp:ListItem>
<asp:ListItem Text="Orange" Value="3"></asp:ListItem>
</asp:DropDownList>
<asp:Button Text="Get Selected Text Value" runat="server" OnClientClick="return GetSelectedTextValue()" />
<script type="text/javascript">
function GetSelectedTextValue() {
var ddlFruits = document.getElementById("<%=ddlFruits.ClientID %>");
var selectedText = ddlFruits.options[ddlFruits.selectedIndex].innerHTML;
var selectedValue = ddlFruits.value;
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
return false;
}
</script>
Get selected Text and Value of ASP.Net DropDownList on Button click using jQuery
The following HTML Markup consists of an ASP.Net DropDownList and a Button. The Button has been assigned a jQuery OnClick event handler.
Inside the jQuery OnClick event handler, the ASP.Net DropDownList object is referenced and then the selected Text and Value is determined and displayed using JavaScript alert message box.
<asp:DropDownList ID="ddlFruits" runat="server">
<asp:ListItem Text="Please Select" Value=""></asp:ListItem>
<asp:ListItem Text="Mango" Value="1"></asp:ListItem>
<asp:ListItem Text="Apple" Value="2"></asp:ListItem>
<asp:ListItem Text="Orange" Value="3"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnGet" Text="Get Selected Text Value" runat="server" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnGet]").click(function () {
var ddlFruits = $("[id*=ddlFruits]");
var selectedText = ddlFruits.find("option:selected").text();
var selectedValue = ddlFruits.val();
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
return false;
});
});
</script>
Screenshot
![Get selected Text and Value of ASP.Net DropDownList using JavaScript and jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
