1
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 "onChangeColumn 4()".
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=chil d;
}
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=dataHi erarchy();
//
function onChangeColumn3 (){
updatePath();
}
//
function onChangeColumn2 (){
form=document.t heForm;
index1=form.col umn1.selectedIn dex;
index2=form.col umn2.selectedIn dex;
index3=form.col umn3.selectedIn dex;
// Create options for column 3
for (i=0;i<dataTree[index1].child[index2].child.length;i ++)
form.column3.op tions[i]=new Option(dataTree[index1].child[index2].child[i], dataTree[index1].child[index2].child[i]);
form.column3.op tions.length=da taTree[index1].child[index2].child.length;
form.column4.va lue="";
updatePath();
}
//
function onChangeColumn1 () {
form=document.t heForm;
index1=form.col umn1.selectedIn dex;
index2=form.col umn2.selectedIn dex;
index3=form.col umn3.selectedIn dex;
// Create options for column 2
for (i=0;i<dataTree[index1].child.length;i ++)
form.column2.op tions[i]=new Option(dataTree[index1].child[i].name, dataTree[index1].child[i].name);
form.column2.op tions.length=da taTree[index1].child.length;
// Clear column 3
form.column3.op tions.length=0;
form.column4.va lue="";
updatePath();
}
//
function updatePath(){
form=document.t heForm;
index1=form.col umn1.selectedIn dex;
index2=form.col umn2.selectedIn dex;
index3=form.col umn3.selectedIn dex;
if ((index1>=0) && (index2>=0) && (index3>=0)) {
text1=form.colu mn1.options[index1].text;
text2=form.colu mn2.options[index2].text;
text3=form.colu mn3.options[index3].text;
form.path.value =text1+" ==> "+text2+" ==> "+text3;
} else
form.path.value ="";
}
function onChangeColumn4 (){
node ();
dataHierarchy() ;
form=document.t heForm;
index1=form.col umn1.selectedIn dex;
index2=form.col umn2.selectedIn dex;
if ((index2 == "09") && (index1 == "1985"))
{
for (var d=20; d <=30; d++)
document.writel n("<option value=" + d + ">" + d + "</option>");
}
else {
for (var d=1; d <=31; d++)
document.writel n("<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="#0 00000">
<tr align="center" bgcolor="lightg rey">
<td width="173" height="25" bgcolor="#99999 9" class="style4">
<div align="center">
<u>Date of Acquisition</u>
</div>
</td>
<td width="147" bgcolor="#99999 9" 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="onCha ngeColumn1();">
<script>
for (i=0; i<dataTree.leng th; i++)
document.writel n("<option value=\""+dataT ree[i].name+"\">"+dat aTree[i].name);
</script>
</select>
</td>
<td align=center>
<select name="column2" onChange="onCha ngeColumn2();">
</select>
</td>
<td>
<select name="column4">
<option selected="selec ted"> </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="onCha ngeColumn3();">
</select>
</div>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>[/HTML]
