I'm trying to fill the values of a dropdown SelectMenu depending on the selection in another menu, but this code is not working. What am I doing wrong?
[<%@LANGUAGE="Javascript"%>
<html>
<head>
<title>Load Dropdown</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
var tennisplayers= new array("Safin","Andre Agassi","Pete Sampras","Anna Kournik","Martina Hingis");
var cricketplayers= new array("Sachin Tendulkar","Steve Waugh","Brian Lara","Sir Bradman");
function set_player(){
var select_sport= document.form1.sport;
var select_player= document.form1.player;
var selected_sport= select_sport.options[select_sport.selectedIndex].value;
select_player.options.length=0;
if (select_sport == "tennis"){
for(var i=0; i<tennisplayers.length; i++)
select_player.options[select_player.options.length] = new Option(tennisplayer);
}
if (selected_sport == "cricket"){
for(var i=0; i<cricketplayers.length; i++)
select_player.options[select_player.options.length] = new option(cricketplayer);
}
}
-->
</script>
</head>
<body>
<form name="form1" method=">
<table align="center" cellpadding="0" cellspacing="0" border="2" bordercolor="#000066">
<tr valign="baseline" bgcolor="#66FFFF">
<td nowrap align="left" width="182" valign="top">
<div align="left"><b><font size="2" face="Arial, Helvetica, sans-serif">SPORT</font></b></div></td>
<td width="219" nowrap="false"><font size="2" face="Times New Roman, Times, serif">
<select name="sport" onChange="set_player()" size="1">
<option value="tennis">-------
<option value="tennis">Tennis
<option value="cricket">Cricket
</select>
</tr>
<tr valign="baseline" bgcolor="#66FFFF">
<td nowrap align="right" width="182" valign="top">
<div align="left"><b><font size="2" face="Arial, Helvetica, sans-serif">PLAYERS</font></b></div></td>
<td width="219" nowrap="false"><font size="2" face="Times New Roman, Times, serif">
<select name="player">
<option>-------
</select>
</tr>
</form>
</body>
</html>]