Earlier i explained Jquery validate dropdown list,Auto complete texbox in jquery,Date format, Cascading dropdownlist in asp.net. Here i will show a simple way to hide/ show Div or Jquery Toggle.For this i have drop down list with two items which are "General" and "Credit".Then add the on change event to Dropdown list which is call the jquery function when make a selection on drop down list
Default.aspx:
<asp:dropdownlist id="ddlptype" onchange="PopulatePatient();" runat="server">
<asp:listitem>General</asp:listitem>
<asp:listitem>Credit</asp:listitem>
</asp:dropdownlist>
<div id="Organisation">
<table><tbody>
<tr><td><asp:label id="lblorgname" runat="server" text="Org name"></asp:label></td> <td><asp:textbox id="txtorgname" runat="server"></asp:textbox></td></tr>
<tr><td><asp:label id="lblEmpCode" runat="server" text="EmpCode"></asp:label></td> <td><asp:textbox id="txtempcode" runat="server"></asp:textbox></td> </tr>
</tbody></table>
</div>
Script:
A small comparison is perform between Dropdown list selected value with patient type (General and Credit) to make this .if the drop down selected item value is equal to general , I show the organization details div and if no is selected, I hide the div.
Default.aspx:
<asp:dropdownlist id="ddlptype" onchange="PopulatePatient();" runat="server">
<asp:listitem>General</asp:listitem>
<asp:listitem>Credit</asp:listitem>
</asp:dropdownlist>
<div id="Organisation">
<table><tbody>
<tr><td><asp:label id="lblorgname" runat="server" text="Org name"></asp:label></td> <td><asp:textbox id="txtorgname" runat="server"></asp:textbox></td></tr>
<tr><td><asp:label id="lblEmpCode" runat="server" text="EmpCode"></asp:label></td> <td><asp:textbox id="txtempcode" runat="server"></asp:textbox></td> </tr>
</tbody></table>
</div>
Script:
A small comparison is perform between Dropdown list selected value with patient type (General and Credit) to make this .if the drop down selected item value is equal to general , I show the organization details div and if no is selected, I hide the div.
function PopulatePatient() { var value = $('#<%=ddlptype.ClientID%>').val(); if (value == "General") { var t = document.getElementById("Organisation"); $("#Organisation").fadeOut("slow"); } else $("#Organisation").fadeIn("slow"); }
No comments:
Post a Comment