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>
</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>
</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>
</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>
</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>
</td>
</tr>
</table>
</form>
</body>
</html>