Jquery hide show div example

Jquery hide show div example

Jquery hide show div example.

Ok. You want to hide or show div based on dropdown list selection. Here are examples in Jquery. First we will see how to control visibility of Div element on selection of dropdown list value.

We will bind change event to dropdown list. It will attach selected index change event.

 $("#dropDiv").hide();

Above statement finds control by ID (in our case its an ID of div control) and hide the element.

Jquery code show hide Div.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" language="javascript">

$(document).ready( function (){ 

    $("#Select1").change( function(){
    
       if($(this).val()!= "Asp.net")
       {
         $("#dropDiv").hide();
       }
       else
       {
        $("#dropDiv").show();
       }
        
  
    });
                    
 });

</script>

HTML code dropdown list selection show hide div.

<div id="dropDiv">
            This is Text written in Div element.
        </div>
        <select id="Select1">
            <option value="Asp.net">Asp.net </option>
            <option value="C#.net">C#.net </option>
            <option value="VB..net">Asp.net </option>
            <option value="PHP">Php</option>
            <option value="Perl">Perl</option>
        </select>

Tags: