show/hide a div with dropdown value in asp.net - html

Question

its my code i want to hide div which have id selnumber (when i select form 60/61 and show a text message "It is form 60/61" at the place of div) but when select pan then show the div.
<div id="selpan">
<asp:DropDownList ID="ddlpan" runat="server">
<asp:ListItem>---Select---</asp:ListItem>
<asp:ListItem>PAN</asp:ListItem>
<asp:ListItem>FORM 60/61</asp:ListItem>
</asp:DropDownList> </div>
</td><div id="selnumber">
<td colspan="3">
<asp:Label ID="add_no" runat="server" Font-Bold="True" Font-Names="Verdana"
Font-Size="10pt" Font-Strikeout="False" Text="File Number"></asp:Label>
</td><td>
<asp:TextBox ID="tbnumber" runat="server" ontextchanged="tbnumber_TextChanged"></asp:TextBox>
</td>
</div>

Answer 1

you can add onchange event on dropdownlist and though javascript you can check if selected item in the list in form 60/61 then hide the div else show the div.

Answer 2

<div id="selpan">
<asp:DropDownList AutoPostBack="true" ID="ddlpan" runat="server" onselectedindexchanged="ddlpan_SelectedIndexChanged">
<asp:ListItem>---Select---</asp:ListItem>
<asp:ListItem>PAN</asp:ListItem>
<asp:ListItem>FORM 60/61</asp:ListItem>
</asp:DropDownList> </div>
<asp:Label Visible="false" ID="lblMessage" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="10pt" Font-Strikeout="False" Text="File Number"></asp:Label>
<div id="selnumber" Visible="false" runat="server">
<asp:Label ID="add_no" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="10pt" Font-Strikeout="False" Text="File Number"></asp:Label>
<asp:TextBox ID="tbnumber" runat="server" ontextchanged="tbnumber_TextChanged"></asp:TextBox>
</div>
.....
protected void ddlpan_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddlpan.SelectedIndex == 1)
{
selnumber.Visible = true;
lblMessage.Visible = false;
}
else if (ddlpan.SelectedIndex == 2)
{
selnumber.Visible = false;
lblMessage.Visible = true;
lblMessage.Text = "It is form 60/61";
}
}

Answer 3

Two ways you can do this.
You can either use onSelectedIndexChanged() event like #Sruthi already said but that will include an unnecessary call to server and take time.
Second and better way to do this is to use javascript onchange() event and save both time and resources.
Javascript code.
<script type="text/javascript">
function change() {
var DropdownList = document.getElementById('<%=ddlpan.ClientID %>');
var SelectedIndex = DropdownList.selectedIndex;
var message = document.getElementById('message');
var selnumber = document.getElementById('selnumber');
if (SelectedIndex == 2) {
selnumber.style.display = "none";
message.style.display = "block";
}
else {
selnumber.style.display = "block";
message.style.display = "none";
}
}
</script>
ASP.NET code..
<div id="selpan">
<asp:DropDownList ID="ddlpan" runat="server" onchange="change()">
<asp:ListItem>---Select---</asp:ListItem>
<asp:ListItem>PAN</asp:ListItem>
<asp:ListItem>FORM 60/61</asp:ListItem>
</asp:DropDownList>
<asp:Label ID="label" runat="server"></asp:Label></div>
</td><div id="selnumber" style="">
<td colspan="3">
<asp:Label ID="add_no" runat="server" Font-Bold="True" Font-Names="Verdana"
Font-Size="10pt" Font-Strikeout="False" Text="File Number"></asp:Label>
</td><td>
<asp:TextBox ID="tbnumber" runat="server" ></asp:TextBox>
</td>
</div>
<div id="message" style="display:none">
<label>This is form 60/61</label>
</div>