ASP.NET/VB.NET: Dropdownlist SelectedIndexChanged not firing with onchange=“javascript:return true;”

Question

I have the following markup:

<asp:DropDownList ID="dd1" AutoPostBack="true" runat="server">
    <asp:ListItem Value="1">1</asp:ListItem>
    <asp:ListItem Value="2">2</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="dd2" AutoPostBack="true" onchange="javascript:return true;" runat="server">
    <asp:ListItem Value="1">3</asp:ListItem>
    <asp:ListItem Value="2">4</asp:ListItem>
</asp:DropDownList>

Wired up to this:

Protected Sub changed1(sender As Object, e As EventArgs) Handles dd1.SelectedIndexChanged

End Sub

Protected Sub changed2(sender As Object, e As EventArgs) Handles dd2.SelectedIndexChanged

End Sub

When dd2's index is changed, you'd expect its handler to fire, right? Well, it doesn't. Instead, it gets "queued up" and is fired after dd1's handler fires when its index is changed. If you take the onchange="javascript:return true;" off dd2, it fires just fine.

Does anyone have any idea what's happening here?

Edit: My first answer would be that using return expressions on a dropdownlist doesn't work the same as a button's click event, but I swear I've done this with dropdownlists before.

Update: I am able to force the server event to fire by doing this in Javascript:

__doPostBack("<%=dd2.ClientID %>", '');

I don't see why I have to do this, but it works. However, I still want to do it the other way, so if someone knows, please let me know so I can mark you as answer.

Answer 1

You shouldn't need that at all. Just set AutoPostBack to true, and if you need to escape validation set CausesValidation to false.

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" CausesValidation="false" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" />

Answer 2

For some reason, I thought you could cancel a dropdown's server event by returning false on the client side's onchange event like you could with a button's onclick event (eg, onclick="javascript:return false;").

What I ended up doing is checking a condition in a function. If true, it fires this:

__doPostBack("<%=dd2.ClientID %>", '');

Otherwise, it doesn't.

Answer 3

<asp:DropDownList ID="page_size" runat="server" **AutoPostBack="true"** OnSelectedIndexChanged="page_size_SelectedIndexChanged">
                            </asp:DropDownList>

Add Autopostback="true did the trick for me.

Answer 4

__doPostBack("<%=dd2.ClientID %>", '');

This worked for me.

This was my drop down:

<asp:DropDownList ID="ddlbranchname" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlBranchChanged" 
onchange="return CheckDate();" CausesValidation="false" CssClass="dropdown">
</asp:DropDownList>

Here is my jquery function:

function CheckDate() {
    var date = document.getElementById('<%= ucDateTimeStart.FindControl("txtDateTime").ClientID %>').value;
    if (date == '') {
        alert("Please select a valid date.");
        return false;
    }
    else {
        __doPostBack("<%=ddlbranchname.ClientID %>", '');
        return true;
    }
    return true;
}