dropdown selected indexchange event

380 Views Asked by At

I have dropdown. for one dropdown selected item need to fire selected index changed event and for another value need to display div .

     <asp:DropDownList ID="ddlSortBy" runat="server" Width="100%" AutoPostBack="true" 
                                    onchange="ddlvalue()"  OnSelectedIndexChanged="ddlSortBy_SelectedIndexChanged" >
                                   <asp:ListItem Text="Select" Selected="True"></asp:ListItem>
                                   <asp:ListItem Text="File Name A-Z" ></asp:ListItem>
                                   <asp:ListItem Text="File Name Z-A" ></asp:ListItem>
                                   <asp:ListItem Text="File Type A-Z" ></asp:ListItem>
                                    <asp:ListItem Text="File Type Z-A" ></asp:ListItem>
                                   <asp:ListItem Text="Uploaded Date" ></asp:ListItem>
                                </asp:DropDownList>

and Javascript function

     function ddlvalue() {
        var sel = document.getElementById('<%=ddlSortBy.ClientID %>');
       // alert(sel.selectedIndex);
        if (sel.selectedIndex == "5") {
            document.getElementById('<%=divDate.ClientID %>').style.display = 'block';

        }
        else {
            document.getElementById('<%=divDate.ClientID %>').style.display = 'none';

        }

    }

and server side change event

              protected void ddlSortBy_SelectedIndexChanged(object sender, EventArgs e)
    {  
    }
1

There are 1 best solutions below

0
On

You can return true from javascript when you want to do postback and false other wise.

Html

onchange="return ddlvalue()"

Javascript

function ddlvalue() {
    var sel = document.getElementById('<%=ddlSortBy.ClientID %>');
   // alert(sel.selectedIndex);
    if (sel.selectedIndex == "5") {
        document.getElementById('<%=divDate.ClientID %>').style.display = 'block';
        return false; 
    }
    else {
        document.getElementById('<%=divDate.ClientID %>').style.display = 'none';
        return true; 
    }
}