Menu
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:
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?
499
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.
153
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void indexChanged(object sender, EventArgs e)
{
Label1.Text = " I did something! ";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test Page</title>
</head>
<body>
<script type="text/javascript">
function firstChanged() {
if(document.getElementById("firstSelect").selectedIndex != 0)
document.getElementById("secondSelect").disabled = false;
else
document.getElementById("secondSelect").disabled = true;
}
</script>
<form id="form1" runat="server">
<div>
<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>
<select id="secondSelect" disabled="disabled">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<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:DropDownList>
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
</form>
<script type="text/javascript">
window.onload = function() {firstChanged();}
</script>
</body>
</html>
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
