In this article I will explain with an example, how to call SelectedIndexChanged event of ASP.Net DropDownList using JavaScript and jQuery.
First the ASP.Net DropDownList will be referenced using JavaScript or jQuery on Client Side and then its SelectedIndexChanged event will be called by making use of the __doPostBack JavaScript function.
Call ASP.Net DropDownList SelectedIndexChanged event using JavaScript
HTML Markup
The following HTML Markup consists of an ASP.Net DropDownList, ASP.Net LinkButton and an HTML Button.
Note: The ASP.Net LinkButton is used for generating the ASP.Net __doPostBack function. The __doPostBack function is automatically generated on Page when a control is added to the Page which does PostBack.
The HTML Button element has been assigned a Click event handler which makes call to the CallSelectedIndexChanged JavaScript function.
Inside the CallSelectedIndexChanged JavaScript function, the __doPostBack function is called and the UniqueID i.e. the name of the DropDownList is passed to the first parameter.
The __doPostBack function causes PostBack and the Server Side SelectedIndexChanged event of the ASP.Net Button is called.
Note: The SelectedIndexChanged event of the DropDownList will only be called when a change is done i.e. different option is selected in the DropDownList.
<asp:DropDownList ID="ddlFruits" runat="server" OnSelectedIndexChanged="DropDownList_Changed" Width = "160">
<asp:ListItem Text="" 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>
<hr />
<input type="button" onclick="CallSelectedIndexChanged()" value="Raise Event" />
<asp:LinkButton ID="lnkFake" runat="server" />
<script type="text/javascript">
function CallSelectedIndexChanged() {
__doPostBack("<%=ddlFruits.UniqueID %>", "");
}
</script>
Server Side SelectedIndexChanged event
Inside the following event handler, the selected Text and Value of the DropDownList is displayed using JavaScript Alert Message box.
protected void DropDownList_Changed(object sender, EventArgs e)
{
string message = "Selected Text: " + ddlFruits.SelectedItem.Text;
message += "\\nSelected Value: " + ddlFruits.SelectedItem.Value;
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + message + "');", true);
}
Call ASP.Net DropDownList SelectedIndexChanged event using jQuery
HTML Markup
The following HTML Markup consists of an ASP.Net DropDownList, ASP.Net LinkButton and an HTML Button.
Note: The ASP.Net LinkButton is used for generating the ASP.Net __doPostBack function. The __doPostBack function is automatically generated on Page when a control is added to the Page which does PostBack.
The HTML Button element has been assigned a jQuery Click event handler.
Inside the jQuery Click event handler, the __doPostBack function is called and the name of the DropDownList is passed to the first parameter.
The __doPostBack function causes PostBack and the Server Side SelectedIndexChanged event of the ASP.Net Button is called.
Note: The SelectedIndexChanged event of the DropDownList will only be called when a change is done i.e. different option is selected in the DropDownList.
<asp:DropDownList ID="ddlFruits" runat="server" OnSelectedIndexChanged="DropDownList_Changed"
Width="160">
<asp:ListItem Text="" 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>
<hr />
<input id="btn" type="button" value="Raise Event" />
<asp:LinkButton ID="lnkFake" runat="server" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
__doPostBack($("[id*=ddlFruits]")[0].name, "");
});
});
</script>
Server Side SelectedIndexChanged event
Inside the following event handler, the selected Text and Value of the DropDownList is displayed using JavaScript Alert Message box.
protected void DropDownList_Changed(object sender, EventArgs e)
{
string message = "Selected Text: " + ddlFruits.SelectedItem.Text;
message += "\\nSelected Value: " + ddlFruits.SelectedItem.Value;
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + message + "');", true);
}
Screenshot
![Call ASP.Net DropDownList SelectedIndexChanged event 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
