Solved

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

Posted on 2010-09-23
2
587 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:dvcrdu
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 22

Accepted Solution

by:
kadaba earned 500 total points
ID: 33751060
try this

<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.value ;
var boxlength = 0;

document.form1.roster.options.length = 1;

if(num == "0")
	return;

for ( ctr=0;ctr<cat[num].length;ctr++)
 {
	boxlength++;
	document.form1.roster.options.add(new Option(cat[num] [ctr], cat[num][ctr]));
 }
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="0">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

0
 

Author Closing Comment

by:dvcrdu
ID: 33751083
Thanks a lot for the help!
0

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

687 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question