In my previous tutorials, I’d explained get selected value or text of asp.net dropdownlist using javascript, get and set asp.net textbox value using jquery, how to split string date into day month and year from code-behind, validate dropdownlist using javascript and other more cracking tutorials on Asp.net, JavaScript, jQuery, GridView here.
Now here in this tutorial, I’ll explain how you can get dropdown list selected text value from client-side and display selected text in asp.net label using jQuery.
First we need to give reference of jQuery under head section. You can simply use below line in head section of your .aspx page.
jQuery Reference
</script>
To get selected text value from dropdown or asp.net dropdownlist using jQuery, we need to bind the change event on document.ready function of jQuery.
jQuery Function To Get DropDownList Text Value
Following is the jQuery code that will return the selected value or text from the dropdownlist with validation:
$(document).ready(function () {
//We are binding onchange event using jQuery built-in change event
$(‘#ddlSubject’).change(function () {
//get selected value and check if subject is selected else show alert box
var SelectedValue = $(“#ddlSubject”).val();
if (SelectedValue > 0) {
//get selected text and set to label
var SelectedText = $(“#ddlSubject option:selected”).text();
lblSelectedText.innerHTML = SelectedText;
//set selected value to label
lblSelectedValue.innerHTML = SelectedValue;
} else {
//reset label values and show alert
lblSelectedText.innerHTML = “”;
lblSelectedValue.innerHTML = “”;
alert(“Please select valid subject.”);
}
});
});
</script>
As you can see that I’ve bind jQuery built-in change event on document.ready because we need to bind onchange event before using it. Your final code looks like as below:
HTML Markup – [.aspx]
Following is the complete HTML Markup code for .aspx page:
<head id=”Head1″ runat=”server”>
<title>Get DropDownList Value or Text using jQuery</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
</script>
<script type=”text/javascript”>
$(document).ready(function () {
//We are binding onchange event using jQuery built-in change event
$(‘#ddlSubject’).change(function () {
//get selected value and check if subject is selected else show alert box
var SelectedValue = $(“#ddlSubject”).val();
if (SelectedValue > 0) {
//get selected text and set to label
var SelectedText = $(“#ddlSubject option:selected”).text();
lblSelectedText.innerHTML = SelectedText;
//set selected value to label
lblSelectedValue.innerHTML = SelectedValue;
} else {
//reset label values and show alert
lblSelectedText.innerHTML = “”;
lblSelectedValue.innerHTML = “”;
alert(“Please select valid subject.”);
}
});
});
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<table>
<tr>
<td>Select any Subject</td>
<td>:</td>
<td>
<asp:DropDownList ID=”ddlSubject” runat=”server” ClientIDMode=”Static”>
<asp:ListItem Value=”0″ Text=”Please select” />
<asp:ListItem Value=”1″ Text=”HTML” />
<asp:ListItem Value=”2″ Text=”CSS” />
<asp:ListItem Value=”3″ Text=”JavaScript” />
<asp:ListItem Value=”4″ Text=”jQuery” />
<asp:ListItem Value=”5″ Text=”Asp.net” />
<asp:ListItem Value=”6″ Text=”PHP” />
<asp:ListItem Value=”7″ Text=”Android” />
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan=”3″> </td>
</tr>
<tr>
<td>You have selected(Text)</td>
<td>:</td>
<td>
<asp:Label ID=”lblSelectedText” runat=”server” ClientIDMode=”Static”>
</asp:Label>
</td>
</tr>
<tr>
<td colspan=”3″> </td>
</tr>
<tr>
<td>You have selected(Value)</td>
<td>:</td>
<td>
<asp:Label ID=”lblSelectedValue” runat=”server” ClientIDMode=”Static”>
</asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Example Result
