Chain select drop down And Table Row
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Chain select drop down And Table Row Added By Sanjay Singh Rao</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("#selectadult").val(0);
$( "#chkavl" ).click(function() {
var adcout=$("#selectadult").val();
var cdcout=$("#selectchild").val();
if($(".appendRow").length > 0){
$('#myTable tr.appendRow').remove();
}
var tblHtml = '';
var k=1;
if(adcout > 0){
for(i=0;i<adcout;i++){
tblHtml += '<tr class="appendRow"><td width="5%" height="30"> '+ k +'</td><td width="5%" height="30">Adult</td>';
tblHtml += '<td width="15%" height="30"><input type="text" name="adultName[]" value="" id="adultName'+ k +'"></td>';
tblHtml += '<td width="15%" height="30"><input type="text" name="adultAge[]" value="" id="adultAge'+ k +'"></td>';
tblHtml += '<td width="15%" height="30"><select name="adultGender[]"><option value="Male">Male</option><option value="Female">Female</option></select></td>';
tblHtml += '<td width="15%" height="30"><input type="text" name="adultIdProof[]" value="" id="adultIdProof'+ k +'"></td>';
k++;
}
}
if(cdcout > 0){
for(i=0;i<cdcout;i++){
tblHtml += '<tr class="appendRow"><td width="5%" height="30"> '+ k +'</td><td width="5%" height="30">Child</td>';
tblHtml += '<td width="15%" height="30"><input type="text" name="childName[]" value="" id="childName'+ k +'"></td>';
tblHtml += '<td width="15%" height="30"><input type="text" name="childAge[]" value="" id="childAge'+ k +'"></td>';
tblHtml += '<td width="15%" height="30"><select name="childGender[]"><option value="Male">Male</option><option value="Female">Female</option></select></td>';
tblHtml += '<td width="15%" height="30"><input type="text" name="childIdProof[]" value="" id="childIdProof'+ k +'"></td>';
k++;
}
}
if(tblHtml.length > 0){
$('#myTable').append(tblHtml);
}
});
});
</script>
<script language="javascript" type="text/javascript">
function setOptions(chosen) {
var selbox = document.myform.opttwo;
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please Select Child','0');
}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('Please Select Child','0');
selbox.options[selbox.options.length] = new Option('1','1');
selbox.options[selbox.options.length] = new Option('2','2');
selbox.options[selbox.options.length] = new Option('3','3');
selbox.options[selbox.options.length] = new Option('4','4');
selbox.options[selbox.options.length] = new Option('5','5');
selbox.options[selbox.options.length] = new Option('6','6');
selbox.options[selbox.options.length] = new Option('7','7');
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('Please Select Child','0');
selbox.options[selbox.options.length] = new Option('1','1');
selbox.options[selbox.options.length] = new Option('2','2');
selbox.options[selbox.options.length] = new Option('3','3');
selbox.options[selbox.options.length] = new Option('4','4');
selbox.options[selbox.options.length] = new Option('5','5');
selbox.options[selbox.options.length] = new Option('6','6');
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('Please Select Child','0');
selbox.options[selbox.options.length] = new Option('1','1');
selbox.options[selbox.options.length] = new Option('2','2');
selbox.options[selbox.options.length] = new Option('3','3');
selbox.options[selbox.options.length] = new Option('4','4');
selbox.options[selbox.options.length] = new Option('5','5');
}
if (chosen == "4") {
selbox.options[selbox.options.length] = new Option('Please Select Child','0');
selbox.options[selbox.options.length] = new Option('1','1');
selbox.options[selbox.options.length] = new Option('2','2');
selbox.options[selbox.options.length] = new Option('3','3');
selbox.options[selbox.options.length] = new Option('4','4');
}
if (chosen == "5") {
selbox.options[selbox.options.length] = new Option('Please Select Child','0');
selbox.options[selbox.options.length] = new Option('1','1');
selbox.options[selbox.options.length] = new Option('2','2');
selbox.options[selbox.options.length] = new Option('3','3');
}
if (chosen == "6") {
selbox.options[selbox.options.length] = new Option('Please Select Child','0');
selbox.options[selbox.options.length] = new Option('1','1');
selbox.options[selbox.options.length] = new Option('2','2');
}
if (chosen == "7") {
selbox.options[selbox.options.length] = new Option('Please Select Child','0');
selbox.options[selbox.options.length] = new Option('1','1');
}
}
</script>
<style type="text/css">
.select{
font-family:tahoma;
font-size:11px;
color:#000000;
font-weight:normal;
width:215px;
}
</style>
</head>
<body>
<div class="container"><!-- middle div starts here-->
<div><input type="button" id="chkavl" name="chkavl" value="Check Availability" /></div>
<div class="middle">
<div class="right-outer"><div class="center">
<div class="content"><form name="myform"><div align="center">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody><tr>
<td width="33%">
<select id="selectadult" name="optone" class="select" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
<option value="0">Please Select Adult</option>
<option value="1">1</option>
<option value="2">2 </option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
<td width="33%">
<select name="opttwo" size="1" class="select" id="selectchild">
<option value="0" selected="selected">Please Select Child</option>
</select></td>
<td width="33%"></td>
</tr>
</tbody></table>
<table width="100%" border="1" cellspacing="5" cellpadding="5" id="myTable">
<tbody><tr>
<td width="5%" height="30"> #</td>
<td width="5%" height="30"> Type</td>
<td width="35%" height="30"> Name</td>
<td width="15%" height="30"> Age</td>
<td width="15%" height="30"> Gender</td>
<td width="30%" height="30"> ID Proof Number<span>*</span></td>
</tr>
</tbody></table>
</div>
<div id="chkAvailability"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</body></html>
No comments:
Post a Comment