Please explain what wrong I am doing. I dont know why javascript is behaving this way. There is two html select box for 'Age From' and 'Age To'.
I am putting the options (value & text) into it through javascript i.e. value from 18 to 74 in both the select boxes.
But I am not getting the desired effect, The first box (Age from) is found empty at the end of the script. Flaw is happening like this first 'Age From' select box is filled with options 18-74, then when filling select box 'Age To' one by one the select box' Age-From' also get emptied one by one. Hence in the end only second select box 'Age to' is filled while select box 'Age Box' remains empty.
I know I can comeup with different ways in order to get the result, but I am w ondering what went wrong in the code.
Here is the code. Please copy, and run the program.
Thanks
Venkat
CODE
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
window.onload = fun_InitialConstructions;
var AgeSelection= new Array();
function fun_InsertValueinAgeArray()
{
var i=0;
var a=18
for(i=0;i<57;i++)
{
if(a<76)
{
var opt_Age=new Option(a, a);
AgeSelection[i]=opt_Age;
a++;
}
}
}
function fun_InsertValueAgeSelectElements(elementId)
{
var select_AgePurposeSrc=document.getElementById(elementId);
var arrayLength=AgeSelection.length;
i=0;
for (i=0;i<arrayLength;i++)
{
select_AgePurposeSrc.options[i]=AgeSelection[i];
}
}
function fun_InitialConstructions()
{
fun_InsertValueinAgeArray();
fun_InsertValueAgeSelectElements("select_AgeFrom");
fun_InsertValueAgeSelectElements("select_AgeTo");
}
</script>
</head>
<body>
Age From
<select name="select_AgeFrom" id="select_AgeFrom">
</select>
--- Age to
<select name="select_AgeTo" id="select_AgeTo">
</select>
</body>
</html>
