Hi
I am designing an offline tool. The idea is :
1) I have three level dependent drop down list.
2) The name say is :Main(having A,B and C as drop down options), Option2(drop down based on selection of A, B or C, showin in the code below) and Option3(based on the selection of options from drop down option2, shown in the code below).
3) there is a "Go" button on the page , which on being pressed, should capture and display the value selected in drop down and display the result in 'Result based on selection' part , which is the lower half of the page.

The bottom half part of the page is named as 'Result based on selection'. In this section , whatever is selected by the user, on pressing "Go" , should be displayed (printed). Not just one, any number of selections on pressing Go should keep on getting added one below the other.

Please help me in capturing and printing the results. Most of the part is done. The code is pasted here:




<!DOCTYPE html PUBLIC >
<html xmlns=" ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Bus</title>
<style type="text/css">
html,body {
height: 100%;
width:100%;
overflow: hidden;
top:0;
left:0;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
/*background: #FFF;*/
font-size: 12px;
}
#maincontainer
{

margin: 0 0 0 0;
background: #fff;
height:100%;
width:100%;
padding: 0px;
}

#mainheader
{
height: 8%;

padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}

#mainheader h1 { margin: 0; }

#mainnavigation
{
border: thin solid black;
float: left;
width: 100%;
height:30%;
background: #FFF;
border-width:1px;
}

#mainnavigation ul
{
margin: 0;
padding: 0;
}

#mainnavigation ul li
{
list-style-type: none;
display: inline;
}

#mainnavigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}

#mainnavigation li a:hover { background: #383; }

#maincontent
{

clear: left;
padding: 5px;
height:55%;

}

#maincontent h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#resultpanel
{
background-color:#CCC;
border-width:2px;
border-color:black;
margin:10px;
padding:10px;
border:20px;
width:auto;
height:auto;
}

#mainfooter
{
background: #CCC;
text-align: right;
padding:2px;
height: 3%;
border:1px;
border-color:black;
}

.make_selection_back { background: url('Header_Looking_Image.jpg') no-repeat; width:
1260px; height: auto;padding:10px; margin:20px; }
.make_selection_table { top: 50px; left: 10px;padding:5px; }
</style>

</head>


<!--//Code Begins here -->
<script type="text/javascript">
var option = new Array();
option['A'] = new Array('A1','A2','A3','A4');
option['B'] = new Array('B1','B2','B3','B4');
option['C'] = new Array('C1','C2','C3','C4');

// iss List
var WTFissList = new Array();
WTFissList['A'] = new Array();
WTFissList['A']['A1'] = new Array('A11','A12','A13','A14');
WTFissList['A']['A2'] = new Array('A21','A22','A23','A24');
WTFissList['A']['A3'] = new Array('A31','A32','A33','A34');
WTFissList['A']['A4'] = new Array('A41','A42','A43','A44');
WTFissList['B'] = new Array();
WTFissList['B']['B1'] = new Array('b11','b12','b13','b14');
WTFissList['B']['B2'] = new Array('b21','b22','b23','b24');
WTFissList['B']['B3'] = new Array('b31','b32','b33','b34');
WTFissList['B']['B4'] = new Array('b41','b42','b43','b44');
WTFissList['C'] = new Array();
WTFissList['C']['C1'] = new Array('NA','NB');
WTFissList['C']['C2'] = new Array('CO','CT');
WTFissList['C']['C3'] = new Array('C23','Cy');
WTFissList['C']['C4'] = new Array('Fi','Ot');
function WTFissSet() {
MainSel = document.getElementById('MainissID');
issID = option[MainSel.value];
changeSelect('Option2', issID, issID);
setissList();
}
function setissList() {
MainSel = document.getElementById('MainissID');
WTFissMid = document.getElementById('Option2');
WTFFinalList = WTFissList[MainSel.value][WTFissMid.value];
changeSelect('Listofiss', WTFFinalList, WTFFinalList);
}
function changeSelect(fieldID, newOptions, newValues) {
selectField = document.getElementById(fieldID);
selectField.options.length = 0;
for (i=0; i<newOptions.length; i++) {
selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
}
}
function displayResult()
{
// Write your logic here and place the result to the below statement;

document.getElementById('resultpanel').innerHTML = "<b>--logic of Result has not been implemented--<b>";
}

function setResult(result)
{
// Write your logic here and place the result to the below statement;

document.getElementById('resultpanel').innerHTML = result;
}

function doCheck() {
if (document.getElementById('Jam').value >=document.getElementById('Mam').value) {
//alert("C1 not Required");
setResult("C1 not Required");
}
else {
//alert("C1 Required");
setResult("C1 Required");
}
}
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
window.onload = func;
} else
{
window.onload = function()
{
if (oldonload)
{
oldonload();
}
func();
}
}
}
addLoadEvent(function()
{
WTFissSet();
});
</script>
<body>
<div id="miancontainer">
<div id="mainheader">
<font face="WTF Logo"><h1><font color="red"> <center>WTF </center></a></h1></font>
<font face="Calibri"></font></font>
<div align="left"><h3><b> BUS</h3><b></div>
</div>

<div id="mainnavigation">
<div class="make_selection_back">
<table border="0" class="make_selection_table">
<tr>
<td>Main:</td>
<td>
<select name="MainissID" id="MainissID" onchange="WTFissSet();">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>&nbsp;&nbsp;
</td>
<td>Option2:</td>
<td>
<select name="Option2" id="Option2" onchange="setissList();">
<option value="">Please select any Option</option>
</select>&nbsp;&nbsp;
</td>
<td>Option3:</td>
<td>
<select name="Listofiss" id="Listofiss">
<option value="">Please select a Option</option>
</select>&nbsp;&nbsp;
</td>
<td><input type="button" value="Go!" onclick="displayResult()"/></td>

</tr>
</table>

</div><!--//make_selection_back-->



<title></title>
<div class="make_selection_back">
<table class="make_selection_table">
<tr>
<td>
Jam1: <input type="text" id="Jam" value="" />
</td><td>
Mam1: <input type="text" id="Mam" value="" />
</td><td>
<input type="button" value="Submit" onclick="doCheck()"/>
</td>
</tr>
</table>
</div>
</div>
<div id="maincontent">
<h3><b> RESULT BASED ON SELECTION</b></h3>
<div id="resultpanel"></div>
</div>
<div id="mainfooter">
<div class="header" style="white-space: nowrap; width:100%; height: 100%; padding:5px 5px 3px 3px; ">
<center>©WTF </center>
</div>
</div>
</div>
</body>
</html>