Viewed 3988 times

Simple ASP.NET application.

I have two drop-down controls. On the first-drop down I have a JavaScript onChange event. The JavaScript enables the second drop-down and removes a value from it (the value selected in the first drop-down). If they click the blank first value of the drop-down, then the second drop-down will be disabled (and the options reset).

I also have code in the OnPreRender method that will enable or disable the second drop-down based on the value of the first drop-down. This is so that the value of the first drop-down can be selected in code (loading user settings).

My problem is:

  1. The user selects something in the first drop-down. The second drop-down will become enabled through JavaScript.
  2. They then change a third drop-down that initiates a post back. After the post back the drop-downs are in the correct state (first value selected, second drop-down enabled).
  3. If they then click the back button, the second drop-down will no longer be enabled although it should be since there's something selected in the first drop-down.

I've tried adding a startup script (that will set the correct state of the second-drop down) through ClientScript.RegisterStartupScript, however when this gets called the first drop-down has a selectedIndex of 0, not what it actually is. My guess is that the value of the selection gets set after my start script (but still doesn't call the onChange script).

Any ideas on what to try?

2 answers given for "Running Javascript after control's selected value has been set"

Accepted Solution

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<script runat="server">
    protected void indexChanged(object sender, EventArgs e)
        Label1.Text = " I did something! ";

<html xmlns="">
<head runat="server">
    <title>Test Page</title>
    <script type="text/javascript">
        function firstChanged() {
            if(document.getElementById("firstSelect").selectedIndex != 0)
                document.getElementById("secondSelect").disabled = false;
                document.getElementById("secondSelect").disabled = true;
    <form id="form1" runat="server">
        <select id="firstSelect" onchange="firstChanged()">
            <option value="0"></option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        <select id="secondSelect" disabled="disabled">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        <asp:DropDownList ID="DropDownList1" AutoPostBack="true" OnSelectedIndexChanged="indexChanged" runat="server">
            <asp:ListItem Text="One" Value="1"></asp:ListItem>
            <asp:ListItem Text="Two" Value="2"></asp:ListItem>    
        <asp:Label ID="Label1" runat="server"></asp:Label>
    <script type="text/javascript">
        window.onload = function() {firstChanged();}

Edit: Replaced the whole code. This should work even in your user control. I believe that Register.ClientScriptBlock is not working because the code you write in that block is executed before window.onload is called. And, I assume (I am not sure of this point) that the DOM objects do not have their values set at that time. And, this is why you are getting selectedIndex as always 0.

If the second dropdown is initially enabled through javascript (I'm assuming this is during a javascript onchange, since you didn't specify), then clicking the back button to reload the previous postback will never enable it.

Mixing ASP.NET with classic javascript can be hairy. You might want to have a look at ASP.NET's Ajax implementation (or the third-party AjaxPanel control if you're forced to use an older ASP.NET version). Those will give you the behaviour that you want through pure C#, without forcing you to resort to javascript hackery-pokery.