Now here in this tutorial, I’ll explain how you can get selected text value from dropdownlist from client-side using onchange event and display selected text in asp.net label using JavaScript.
In my previous tutorials, I’d explained how to get selected text from dropdown and set to asp.net label using jquery, how to show confirm message box using javascript, how to show alert message from code-behind, how to call javascript function from code-behind and more cracking tutorials on Asp.net, JavaScript, jQuery here.
We can get selected text value from dropdown or asp.net dropdownlist using JavaScript onchange event from client-side. This method will call automatically when we change the dropdown selected index or value.
Function To Get DropDownList Text Value – [JavaScript]
Following is the JavaScript code that will return the selected value or text from the dropdown list with validation:
function GetSelectedSubject(e) {
//get label controls to set value/text
var lblSelectedText = document.getElementById(“lblSelectedText”);
var lblSelectedValue = document.getElementById(“lblSelectedValue”);
//get selected value and check if subject is selected else show alert box
var SelectedValue = e.options[e.selectedIndex].value;
if (SelectedValue > 0) {
//get selected text and set to label
var SelectedText = e.options[e.selectedIndex].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>
And here is a DropDownList with onchange event:
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>
As you can see that, I’ve passed dropdownlist event object as this in GetSelectedSubject() method and that is needed here to get selected value or text from the dropdownlist. Also make sure you that have added ClientIDMode=”Static” propery of dropdown to access in JavaScript with it’s unique name.
HTML Markup – [.aspx]
Following is the complete HTML Markup code that I used for the demonstration:
<head id=”Head1″ runat=”server”>
<title>Get DropDownList Value or Text using JavaScript</title>
<script type=”text/javascript”>
function GetSelectedSubject(e) {
//get label controls to set value/text
var lblSelectedText = document.getElementById(“lblSelectedText”);
var lblSelectedValue = document.getElementById(“lblSelectedValue”);
//get selected value and check if subject is selected else show alert box
var SelectedValue = e.options[e.selectedIndex].value;
if (SelectedValue > 0) {
//get selected text and set to label
var SelectedText = e.options[e.selectedIndex].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” onchange=”GetSelectedSubject(this);”
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
Hi,
For example, if we make 3 labels?
ID, Name, Date, ON / OFF. Value and text full. How to show on label example date or State ON/OFF. (true,false)
Thanks