Hide Show ASP.Net DropDownList and Label using JavaScript

hina

SOLVED CLOSED ACTIVE ANSWERED
User: hina
Posted: on Sep 18, 2015 12:31 AM
Forum: JavaScript
Answer: 1
Views: 10648

i have develop a function in which i hide the dropdown or unhide using java script. it should work fine but i use the prperties of drop autopost back =true so it will be hide for some time and un hide for some time. i will call my function on dropdown change.

following my code

 var custType=document.getElementById('ddlshow');
    var custTypeVal=custType.options[custType.selectedIndex].text;

if(custTypeVal=='value')
     {
    
      document.getElementById("ddlType").style.display = "block";
        document.getElementById("Label33").style.display = "block";
   
     }
     else 
     
     {
      document.getElementById("ddlType").style.display = "none";
        document.getElementById("Label33").style.display = "none";
}

how i parmanent hide or un hide on change dropdown1 not for some time please help me following my html

<asp:DropDownList ID="custType" runat="server"  AutoPostBack="true">
 <asp:ListItem value="11">value</asp:ListItem>
 <asp:ListItem value="12">value</asp:ListItem>
</asp:DropDownList>

auto post is my requrirment bacause have done many change on them. i know problem due to auto post back =true .now i solved it

Shashika...

0 2

Reply
ANSWER
User: Shashikant
Replied: on Sep 18, 2015 08:15 AM
Report

Please refer below sample.

HTML

<div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            ChangeShow();
        });
        function ChangeShow() {
            var custType = document.getElementById('ddlshow');
            var custTypeVal = custType.options[custType.selectedIndex].text;

            if (custTypeVal == 'value') {

                document.getElementById("ddlType").style.display = "block";
                document.getElementById("Label33").style.display = "block";

            }
            else {
                document.getElementById("ddlType").style.display = "none";
                document.getElementById("Label33").style.display = "none";
            }
            return false;
        }
    </script>
    <asp:DropDownList ID="ddlshow" runat="server" AutoPostBack="true" onchange="return ChangeShow()">
        <asp:ListItem Value="0">select</asp:ListItem>
        <asp:ListItem Value="11">value</asp:ListItem>
        <asp:ListItem Value="12">value</asp:ListItem>
    </asp:DropDownList>
    <br />
    <br />
    <asp:DropDownList ID="ddlType" runat="server" AutoPostBack="true">
        <asp:ListItem Value="15">value</asp:ListItem>
        <asp:ListItem Value="18">value</asp:ListItem>
    </asp:DropDownList>
    <br />
    <asp:Label ID="Label33" Text="text" runat="server" />
</div>

I hope this will help you out.

Hide Show ASP.Net DropDownList and Label using JavaScript

Company

Explore

Follow us

Contact Us