Dear All,
I am a learner of Javascript. I got an assignment as below. Could anyone give me a suggestion for fixing the function of "onChangeColumn4()".
The original requirement of the start date of this practice is 1985 09 20.
When user click different year and different month, then the "Index Number" will display different number. (actually, every season is the same index number".)
I used a data hierarchy approach to program it, but it seems not working very well.
If anyone can give me suggestion, I deeply appreciate.
Best Wishes!
Aleck
-----------------------------------------------------------------------
[HTML]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
}
.style3 {
font-size: 24px;
font-weight: bold;
}
.style4 {
color: #660000;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
-->
</style>
<script>
function node(name, child){
this.name=name;
this.child=child;
}
function dataHierarchy(){
// before 1985
var b1985=new Array();
var i=0;
b1985[i++]=new node(" ", [" "]);
// 1985
var y1985=new Array();
var i=0;
y1985[i++]=new node(" ", [" "]);
y1985[i++]=new node("09", [" 71.3"]);
y1985[i++]=new node("10", [" 72.7"]);
y1985[i++]=new node("11", [" 72.7"]);
y1985[i++]=new node("12", [" 72.7"]);
// 1986
var y1986=new Array();
var i=0;
y1986[i++]=new node(" ", [" "]);
y1986[i++]=new node("01", [" 74.4"]);
y1986[i++]=new node("02", [" 74.4"]);
y1986[i++]=new node("03", [" 74.4"]);
y1986[i++]=new node("04", [" 75.6"]);
y1986[i++]=new node("05", [" 75.6"]);
y1986[i++]=new node("06", [" 75.6"]);
y1986[i++]=new node("07", [" 77.6"]);
y1986[i++]=new node("08", [" 77.6"]);
y1986[i++]=new node("09", [" 77.6"]);
y1986[i++]=new node("10", [" 79.8"]);
y1986[i++]=new node("11", [" 79.8"]);
y1986[i++]=new node("12", [" 79.8"]);
// year
var output=new Array();
var i=0;
output[i++]=new node(" ", b1985);
output[i++]=new node("1985", y1985);
output[i++]=new node("1986", y1986);
return(output);
}
dataTree=dataHierarchy();
//
function onChangeColumn3(){
updatePath();
}
//
function onChangeColumn2(){
form=document.theForm;
index1=form.column1.selectedIndex;
index2=form.column2.selectedIndex;
index3=form.column3.selectedIndex;
// Create options for column 3
for (i=0;i<dataTree[index1].child[index2].child.length;i++)
form.column3.options[i]=new Option(dataTree[index1].child[index2].child[i], dataTree[index1].child[index2].child[i]);
form.column3.options.length=dataTree[index1].child[index2].child.length;
form.column4.value="";
updatePath();
}
//
function onChangeColumn1() {
form=document.theForm;
index1=form.column1.selectedIndex;
index2=form.column2.selectedIndex;
index3=form.column3.selectedIndex;
// Create options for column 2
for (i=0;i<dataTree[index1].child.length;i++)
form.column2.options[i]=new Option(dataTree[index1].child[i].name, dataTree[index1].child[i].name);
form.column2.options.length=dataTree[index1].child.length;
// Clear column 3
form.column3.options.length=0;
form.column4.value="";
updatePath();
}
//
function updatePath(){
form=document.theForm;
index1=form.column1.selectedIndex;
index2=form.column2.selectedIndex;
index3=form.column3.selectedIndex;
if ((index1>=0) && (index2>=0) && (index3>=0)) {
text1=form.column1.options[index1].text;
text2=form.column2.options[index2].text;
text3=form.column3.options[index3].text;
form.path.value=text1+" ==> "+text2+" ==> "+text3;
} else
form.path.value="";
}
function onChangeColumn4(){
node ();
dataHierarchy();
form=document.theForm;
index1=form.column1.selectedIndex;
index2=form.column2.selectedIndex;
if ((index2 == "09") && (index1 == "1985"))
{
for (var d=20; d <=30; d++)
document.writeln("<option value=" + d + ">" + d + "</option>");
}
else {
for (var d=1; d <=31; d++)
document.writeln("<option value=" + d + ">" + d + "</option>");
}
}
</script>
</head>
<body>
<table width="94%" border="0" align="center">
<tr>
<td colspan="2">
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td colspan="2">
<form id="theForm" name="theForm" method="post" action="">
<table width="341" border="0" align="center" cellpadding="3" cellspacing="3" bordercolor="#000000">
<tr align="center" bgcolor="lightgrey">
<td width="173" height="25" bgcolor="#999999" class="style4">
<div align="center">
<u>Date of Acquisition</u>
</div>
</td>
<td width="147" bgcolor="#999999" class="style4">
<div align="center">
<u>Index Number</u>
</div>
</td>
</tr>
<tr bgcolor="white">
<td>
<div align="center">
<table align=center border=0>
<tr>
<td align=center>
<select name="column1" onChange="onChangeColumn1();">
<script>
for (i=0; i<dataTree.length; i++)
document.writeln("<option value=\""+dataTree[i].name+"\">"+dataTree[i].name);
</script>
</select>
</td>
<td align=center>
<select name="column2" onChange="onChangeColumn2();">
</select>
</td>
<td>
<select name="column4">
<option selected="selected"> </option>
<script>
onChangeColumn4 ();
</script>
</select>
</td>
<td align=center>
<div align="center"></div>
</td>
</tr>
</table>
</div>
</td>
<td>
<div align="center">
<select name="column3" size="1" onChange="onChangeColumn3();">
</select>
</div>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>[/HTML]