Search This Blog

Friday, July 19, 2013

Jave script code for div show or hide depend on drop-down value

Jave script code for div show or hide depend on drop-down value: 

 OUT PUT: 





 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
</head>
<body onload="clear()";>
<script type="text/jscript">
    function checktable() {
     
        if (document.form1.ddlist.value == 0) {
            document.all.div1.style.display = "none";
            document.all.div2.style.display = "none";
            document.all.div3.style.display = "none";
            document.all.div4.style.display = "none";
         
        }
        if (document.form1.ddlist.value == 1)
         {
             document.all.div1.style.display = "inline";
             document.all.div2.style.display = "none";
             document.all.div3.style.display = "none";
             document.all.div4.style.display = "none";
         
        }
        if (document.form1.ddlist.value == 2)
        {
            document.all.div1.style.display = "inline";
            document.all.div2.style.display = "inline";
            document.all.div3.style.display = "none";
            document.all.div4.style.display = "none";
       
        }
        if (document.form1.ddlist.value == 3) {
            document.all.div1.style.display = "inline";
            document.all.div2.style.display = "inline";
            document.all.div3.style.display = "inline";
            document.all.div4.style.display = "none";
         
        }
        if (document.form1.ddlist.value == 4) {
            document.all.div1.style.display = "inline";
            document.all.div2.style.display = "inline";
            document.all.div3.style.display = "inline";
            document.all.div4.style.display = "inline";
       
        }
    }

    function showChild1() {
   
        if (document.form1.child1.value == 0) {
            document.all.child1_1.style.display = "none";
            document.all.child1_2.style.display = "none";

        }
        if (document.form1.child1.value == 1)
        {
            document.all.child1_1.style.display = "inline";
            document.all.child1_2.style.display = "none";
         
        }
        if (document.form1.child1.value == 2)
        {
            document.all.child1_1.style.display = "inline";
            document.all.child1_2.style.display = "inline";
         
        }
    }

    function showChild2() {
   
        if (document.form1.child2.value == 0) {
            document.all.child2_1.style.display = "none";
            document.all.child2_2.style.display = "none";

        }
        if (document.form1.child2.value == 1) {
            document.all.child2_1.style.display = "inline";
            document.all.child2_2.style.display = "none";

        }
        if (document.form1.child2.value == 2) {
            document.all.child2_1.style.display = "inline";
            document.all.child2_2.style.display = "inline";

        }
    }
    function showChild3() {
   
        if (document.form1.child3.value == 0) {
            document.all.child3_1.style.display = "none";
            document.all.child3_2.style.display = "none";

        }
        if (document.form1.child3.value == 1) {
            document.all.child3_1.style.display = "inline";
            document.all.child3_2.style.display = "none";

        }
        if (document.form1.child3.value == 2) {
            document.all.child3_1.style.display = "inline";
            document.all.child3_2.style.display = "inline";

        }
    }
    function showChild4() {
   
        if (document.form1.child4.value == 0) {
            document.all.child4_1.style.display = "none";
            document.all.child4_2.style.display = "none";

        }
        if (document.form1.child4.value == 1) {
            document.all.child4_1.style.display = "inline";
            document.all.child4_2.style.display = "none";

        }
        if (document.form1.child4.value == 2) {
            document.all.child4_1.style.display = "inline";
            document.all.child4_2.style.display = "inline";

        }
    }

</script>
<form id="form1" name="form1" action="">
    <table class="style1">
     

        <tr>
            <td>
                <select id="ddlist" name="ddlist" onchange="checktable();">
                 <option value=0 selected="selected">Select Room</option>
                    <option value=1>1</option>
                     <option value=2>2</option>
                     <option value=3>3</option>
                     <option value=4>4</option>
                </select></td>
            <td>
                &nbsp;</td>
        </tr>
     

        <tr >
            <td>
                <div id="div1" style="display:none">
                <table class="style1" id="tb1">
                   <tr>
<td>
                                                <div style="float:left;padding-right:1px;">
<label for="sheepItForm_#index#_adult"><a href="#" onclick="javascript:return false;" title="Number of Adults(1-4)">Room</a></label>
<label>
Room:1</label>
</div>
<div style="float:left;padding-right:1px;">
<label for="sheepItForm_#index#_adult"><a href="#" onclick="javascript:return false;" title="Number of Adults(1-4)">Adults</a></label>
<select id="field_form1_room_adult" name="field_form1_room_adult" class="small field_form1_room_adult#index#">
<option value="1" selected="selected">1</option>
<option value="2" >2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div style="float:left;padding-right:1px; display:block;" id="divc1">
<label for="sheepItForm_#index#_child"><a href="#" onclick="javascript:return false;" title="Number of Children(0-2)">Child</a></label>
<select id="child1" name="child1" class="small field_form1_room_#index#_child" onchange="showChild1();">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div style="float:left;padding-right:1px;display:none;" id="child1_1">
<label for="sheepItForm_#index#_fage"><a href="#" onclick="javascript:return false;" title="Age of child 1 (0-18)"> Ch1 age</a><span id="Span1"></span></label>
<select id="field_form1_fage" name="field_form1_fage"  class="small field_form1_fage#index#">
<option value="" selected="selected"></option>
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

</select>
</div>
<div style="float:left; padding-right:1px;display:none;" id="child1_2">
<label for="sheepItForm_#index#_sage"><a href="#" onclick="javascript:return false;" title="Age of child 2 (0-18)"> Ch2 age</a> <span id="Span2"></span></label>
<select id="field_form1_sage" name="field_form1_sage" class="small field_form1_sage#index#">
<option value="" selected="selected"></option>
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

</select>
</div>
<div style="float:left;padding-top:20px;">
<a id="sheepItForm_remove_current" href="#">
<img class="delete" src="/images/cross.png" width="16" height="16" border="0" />
</a>
</div>
</td>
</tr>
                </table>
                </div>
            </td>
            <td>
                &nbsp;</td>
        </tr>
     

        <tr>
            <td><div id="div2" style="display:none">
                <table class="style1"  id="tb2">
                   <tr>
<td>
                                                <div style="float:left;padding-right:1px;">
<label for="sheepItForm_#index#_adult"><a href="#" onclick="javascript:return false;" title="Number of Adults(1-4)">Room</a></label>
<label>
Room:2</label>
</div>
<div style="float:left;padding-right:1px;">
<label for="sheepItForm_#index#_adult"><a href="#" onclick="javascript:return false;" title="Number of Adults(1-4)">Adults</a></label>
<select id="Select1" name="field_form1_room_adult" class="small field_form1_room_adult#index#">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div style="float:left;padding-right:1px;" >
<label for="sheepItForm_#index#_child"><a href="#" onclick="javascript:return false;" title="Number of Children(0-2)">Child</a></label>
<select id="child2" name="child2" class="small field_form1_room_#index#_child" onchange="showChild2();">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div style="float:left;padding-right:1px;display:none;" id="child2_1">
<label for="sheepItForm_#index#_fage"><a href="#" onclick="javascript:return false;" title="Age of child 1 (0-18)"> Ch1 age</a><span id="Span3"></span></label>
<select id="Select3" name="field_form1_fage"  class="small field_form1_fage#index#">
<option value="" selected="selected"></option>
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>

</select>
</div>
<div style="float:left; padding-right:1px;display:none;" id="child2_2">
<label for="sheepItForm_#index#_sage"><a href="#" onclick="javascript:return false;" title="Age of child 2 (0-18)"> Ch2 age</a> <span id="Span4"></span></label>
<select id="Select4" name="field_form1_sage" class="small field_form1_sage#index#">
<option value="" selected="selected"></option>
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>

</select>
</div>
<div style="float:left;padding-top:20px;">
<a id="A1" href="#">
<img class="delete" src="/images/cross.png" width="16" height="16" border="0" />
</a>
</div>
</td>
</tr>
                </table></div>
            </td>
            <td>
                &nbsp;</td>
        </tr>
          <tr>
            <td><div id="div3" style="display:none">
                <table class="style1"  id="tb3">
                   <tr>
<td>
                                                <div style="float:left;padding-right:1px;">
<label for="sheepItForm_#index#_adult"><a href="#" onclick="javascript:return false;" title="Number of Adults(1-4)">Room</a></label>
<label>
Room:3</label>
</div>
<div style="float:left;padding-right:1px;">
<label for="sheepItForm_#index#_adult"><a href="#" onclick="javascript:return false;" title="Number of Adults(1-4)">Adults</a></label>
<select id="Select5" name="field_form1_room_adult" class="small field_form1_room_adult#index#">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div style="float:left;padding-right:1px;">
<label for="sheepItForm_#index#_child"><a href="#" onclick="javascript:return false;" title="Number of Children(0-2)">Child</a></label>
<select id="child3" name="child3" class="small field_form1_room_#index#_child" onchange="showChild3();">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div style="float:left;padding-right:1px;display:none;" id="child3_1">
<label for="sheepItForm_#index#_fage"><a href="#" onclick="javascript:return false;" title="Age of child 1 (0-18)"> Ch1 age</a><span id="Span5"></span></label>
<select id="Select7" name="field_form1_fage"  class="small field_form1_fage#index#">
<option value="" selected="selected"></option>
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

</select>
</div>
<div style="float:left; padding-right:1px;display:none;" id="child3_2">
<label for="sheepItForm_#index#_sage"><a href="#" onclick="javascript:return false;" title="Age of child 2 (0-18)"> Ch2 age</a> <span id="Span6"></span></label>
<select id="Select8" name="field_form1_sage" class="small field_form1_sage#index#">
<option value="" selected="selected"></option>
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

</select>
</div>
<div style="float:left;padding-top:20px;">
<a id="A2" href="#">
<img class="delete" src="/images/cross.png" width="16" height="16" border="0" />
</a>
</div>
</td>
</tr>
                </table></div>
            </td>
            <td>
                &nbsp;</td>
        </tr>
          <tr>
            <td><div id="div4" style="display:none">
                <table class="style1"  id="tb4">
                   <tr>
<td>
                                                <div style="float:left;padding-right:1px;">
<label for="sheepItForm_#index#_adult"><a href="#" onclick="javascript:return false;" title="Number of Adults(1-4)">Room</a></label>
<label>
Room:4</label>
</div>
<div style="float:left;padding-right:1px;">
<label for="sheepItForm_#index#_adult"><a href="#" onclick="javascript:return false;" title="Number of Adults(1-4)">Adults</a></label>
<select id="Select9" name="field_form1_room_adult" class="small field_form1_room_adult#index#">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div style="float:left;padding-right:1px;">
<label for="sheepItForm_#index#_child"><a href="#" onclick="javascript:return false;" title="Number of Children(0-2)">Child</a></label>
<select id="child4" name="child4" class="small field_form1_room_#index#_child" onchange="showChild4();">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div style="float:left;padding-right:1px;display:none;" id="child4_1">
<label for="sheepItForm_#index#_fage"><a href="#" onclick="javascript:return false;" title="Age of child 1 (0-18)"> Ch1 age</a><span id="Span7"></span></label>
<select id="Select11" name="field_form1_fage"  class="small field_form1_fage#index#">
<option value="" selected="selected"></option>
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

</select>
</div>
<div style="float:left; padding-right:1px;display:none;" id="child4_2">
<label for="sheepItForm_#index#_sage"><a href="#" onclick="javascript:return false;" title="Age of child 2 (0-18)"> Ch2 age</a> <span id="Span8"></span></label>
<select id="Select12" name="field_form1_sage" class="small field_form1_sage#index#">
<option value="" selected="selected"></option>
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>

</select>
</div>
<div style="float:left;padding-top:20px;">
<a id="A3" href="#">
<img class="delete" src="/images/cross.png" width="16" height="16" border="0" />
</a>
</div>
</td>
</tr>
                </table></div>
            </td>
            <td>
                &nbsp;</td>
        </tr>
    </table>
    </form>
</body>
</html>

Posted by at

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )