I'm trying to show and hide columns in a table based on the selected item from a dropdown list. Table has these columns:
- X
- Y
- Z
Dropdown list has these options:
- A
- B
- C
When A is selected i want to show all the fields (X,Y,Z) in the table but when B or C are selected i want to hide Y and show just X and Z. The table is displayed as a form filled out by the user. When I select B from the ddl and click save after that the form is saved without Y (that's what we need) but the issue is here, when I open again the saved form and I select A the column Y doesn't show, I'll have to select A then click save then open again the form to be able to see the column Y. For some reason The column Y doesn't show up immediately after choosing B from the dropdown list.
This is my code:
<tr>
<td align="right">
<asp:Label ID="Label1" runat="server"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddl_1" runat="server">
<asp:ListItem Selected="True" Value="0">A</asp:ListItem>
<asp:ListItem Selected="False" Value="1">B</asp:ListItem>
<asp:ListItem Selected="False" Value="2">C</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
JQ Function:
$(function () {
$("#ddl_1").change(function () {
if ($("#ddl_1").val() == 0)
{
$("#Y").show();
}
else if (($("#ddl_1").val() == 1) || ($("#ddl_1").val() == 2))
{
$("#Y").hide();
}
})
});
How can I make the column Y shows up immediately after choosing B or C from the ddl without having to change the selection in ddl then save the form then open again the form to be able to see the column Y? Thank you
