asked on

How Do I Use Javascript To Make A Drop Down Menu Of Items Display Subitems In A Selection List?

Experts,

I have 5 pro football teams in the drop down menu. when i select a team i wish to display that teams roster in the selection list automatically.

The code below is not working and quite honestly, I am stumped.

Thanking you in advance for the help.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Team Rosters</title>

<script type="text/javascript">
/* <![cdata{ */

// 5 arrays with 5 players each + array [0] as default  
cat = new Array()
cat [0] = new Array(1)
cat [0][0] = " "

cat [1] = new Array()
cat [1] [0] = "Adams, Flozell"
cat [1] [1] = "Allen, Will"
cat [1] [2] = "Batch, Charlie"
cat [1] [3] = "Battle, Arnaz"
cat [1] [4] = "Brown, Antonio"

cat [2] = new Array()
cat [2] [0] = "Akers, David"
cat [2] [1] = "Allen, Nate"
cat [2] [2] = "Avant, Jason"
cat [2] [3] = "Barnes, Antwan"
cat [2] [4] = "Bell, Joique"


cat [3] = new Array()
cat [3] [0] = "Ayodele, Akin"
cat [3] [1] = "Bell, Demetrius"
cat [3] [2] = "Brohm, Brian"
cat [3] [3] = "Byrd, Jairus"
cat [3] [4] = "Carrington, Alex"


cat [4] = new Array()
cat [4] [0] = "Applewhite, Antwan"
cat [4] [1] = "Bennett, Fred"
cat [4] [2] = "Boone, Alfonso"
cat [4] [3] = "Burnett, Kevin"
cat [4] [4] = "Cason, Antoine"


cat [5] = new Array()
cat [5] [0] = "Abdullah, Husain"
cat [5] [1] = "Allen, Asher"
cat [5] [2] = "Allen, Jared"
cat [5] [3] = "Baskett, Hank"
cat [5] [4] = "Berrian, Bernard"

//============================================

// function to fill the second drop down from 
// the array based on the item selected in the first drop down.

function ListRoster()
{
var num=document.form1.team.selectedIndex 
var boxlength = 0

document.form1.roster.selectedIndex = 0
for ( ctr=0;ctr<roster[num].length;ctr++)
 {
 boxlength++;
 document.form1.roster.options[ctr] = new Option(roster[num] [ctr], roster[num][ctr]);
 }
document.form1.roster.length = boxlength;
document.form1.roster.options.length = boxlength;
document.form1.roster.focus() ;
}

/* }}> */	  
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">

<label for="team">Team Name</label>
  <select name="team" id="team" onchange="JavaScript:ListRoster()">
    <option selected="selected" value="">Choose Team</option>

    <option value="1">Steelers</option>
    <option value="2">Eagles</option>
    <option value="3">Bills</option>
    <option value="4">Chargers</option>
    <option value="5">Vikings</option>
  </select>
  &nbsp;
&nbsp;&nbsp;	&nbsp;

<label for="roster">Team Rosters</label>
	<select name="roster" size="1" id="roster">
    <option value="Choose Roster">Choose Roster</option>
</select>
</form>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

kadaba

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dvcrdu

ASKER

Thanks a lot for the help!