Is there a way to call a javascript function when the selectedIndex of a select input has been changed?

Using this code in the c# code behind file

riskSeverityDropDown.SelectedValue = Convert.ToString(planRisk.Severity);
riskSeverityDropDown.SelectedIndexChanged += new EventHandler(riskSeverityDropDown_SelectedIndexChanged);
riskSeverityDropDown.AutoPostBack = true;

want to change something else on the page with javascript when the index is changed.

Any help would be much appreciated. Thanks in advance

Is there a way to call a javascript function when the selectedIndex of a select input has been changed?

Using this code in the c# code behind file

riskSeverityDropDown.SelectedValue = Convert.ToString(planRisk.Severity);
riskSeverityDropDown.SelectedIndexChanged += new EventHandler(riskSeverityDropDown_SelectedIndexChanged);
riskSeverityDropDown.AutoPostBack = true;

want to change something else on the page with javascript when the index is changed.

Any help would be much appreciated. Thanks in advance

• c#
• javascript

• <clippy>It looks like you're trying to build a dynamic control...</clippy> Have you considered putting a regular control in the markup and just setting visible to true or false as needed? – Joel Coehoorn Commented Aug 3, 2009 at 19:22

4 Answers 4

You're already going to server code (AutoPostBack is true), which means you're going to rebuild the entire page anyway. Running javascript at this point would be a little silly, because any changes you make to the DOM will be lost and any ajax requests you want to send can instead be handled by normal server code. If you really want to do this, you can just register the script to run when the page loads after the postback.

On the other hand, if you can do this without any server code at all then set AutoPostBack to false and the basic html select control has a nice onchange event you can handle.

Simply add an onchange to your asp:dropdownlist.

<asp:DropDownList ID="riskSeverityDropdown"
                  AutoPostBack="True"
                  SelectedIndexChanged="riskSeverityDropDown_SelectedIndexChanged"
                  onChange="functionName()"
                  runat="server" />

or to do this from codebehind use:

riskSeverityDropdown.Attributes["onchange"] = "functionName()";

You want to add an attribute to that drop down called "onchange" and set it to call a JavaScript method of your choosing.

Use JQuery. It exposes a rich set of events that you can use to code against practically anything in a uniform manner. It is also quite easy to learn, pact, and popular.

In short you can't go wrong if you use JQuery. It is meant to solve problems like this well.