Advertisement

06.26.2008 at 03:22PM PDT, ID: 23520058
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
9.8

How to populate 4 drop down menus

Asked by kwhitney2008 in JavaScript, Hypertext Markup Language (HTML), Dynamic HTML (DHTML)

Tags: ,

I have seen many answers to questions about populating 2 drop down lists and even three drop down lists, but not 4.  I might also want to go to 5, but would just like to get 4 working first.  I am posting my code below.  I have had success getting up to three to populate, but not the fourth.  I feel that the code in between the secondGroups and thirdGroups is where I'm messed up, but it might be after the thirdGroups as well.  I have tried for days to get this working and would appreciate any help.  Thanks.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Step 1 -- Choose Conference</title>
</head>

<body>

<form name="register">

        <tr>

          <td width="12%" height="114" align="left" valign="top" rowspan="3">

          <p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>

          <td width="22%" height="114" align="left" valign="top" colspan="4" rowspan="3">

          <p style="margin-top: 0; margin-bottom: 0">

                  &nbsp;</p>
                  <p style="margin-top: 0; margin-bottom: 0">

                  <font face="Arial" size="1">Step 1 -- Choose Conference</font></p>
                  <p style="margin-top: 0; margin-bottom: 0">

          &nbsp;</p>
                  <p style="margin-top: 0; margin-bottom: 0">

                  <select size="1" name="conference" onChange="conf(this.options.selectedIndex)">
                  <option selected>---Select Conference---</option>
                  <option>The Writing Academy -- Foundations & 15 Points of Distinction</option>
                  <option>The Writing Academy -- Competitive Writing Games</option>
                  <option>The Writing Academy -- Idea Development Day</option>
                  <option>The Writing Academy -- Discovering the Author's Voice</option>
                  <option>The Writing Academy -- 63 Golden Minutes</option>
                  <option>The Writing Academy -- Triplets</option>
                  <option>The Writing Academy -- 4-Day Summer Institutes</option>
                  <option>Johnny Can Spell/Write</option>
                  <option>GRAM-MARvelous</option>
                  <option>Words at Work - Vocabulary</option>
                  <option>Teaching English Phonics to the Spanish Speaker</option>
                  </select>

          <p style="margin-top: 0; margin-bottom: 0">

          &nbsp;</td>

          <td width="39%" height="38" align="left" valign="top">

          <p style="margin-top: 0; margin-bottom: 0">
                  &nbsp;<p style="margin-top: 0; margin-bottom: 0">
                  <font face="Arial" size="1">Step 2 -- Choose Grade Level</font><p style="margin-top: 0; margin-bottom: 0">
                  <select size="1" name="grade" onChange="grad(this.options.selectedIndex)">
                  <option value=" " selected> </option>
                  <option value=" " selected>---Select Grade Level---</option>
                  <option value=" " selected>---Select Grade Level---</option>
                  <option value=" " selected>---Select Grade Level---</option>
                  <option value=" " selected>---Select Grade Level---</option>
                  <option value=" " selected>---Select Grade Level---</option>
                  <option value=" " selected>---Select Grade Level---</option>
                  <option value=" " selected>---Select Grade Level---</option>
                  <option value=" " selected>---Select Grade Level---</option>
                  <option value=" " selected>---Select Grade Level---</option>
                  <option value=" " selected>---Select Grade Level---</option>
                  <option value=" " selected>---Select Grade Level---</option>
                  </select><p style="margin-top: 0; margin-bottom: 0">
                  &nbsp;</td>

          <td width="24%" height="114" align="left" valign="top" rowspan="3">

          <p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>

          <td width="8%" height="114" align="left" valign="top" rowspan="3">

          <p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>

          <td width="13%" height="114" align="left" valign="top" rowspan="3">

          <p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>

        </tr>

        <tr>

          <td width="39%" height="38" align="left" valign="top">

          <p style="margin-top: 0; margin-bottom: 0">

          <font face="Arial" size="1">Step 3 -- Select Day(s)</font></p>
                  <p style="margin-top: 0; margin-bottom: 0">
                  <select size="1" name="days" onChange="day(this.options.selectedIndex)">
                  <option value=" " selected> </option>
                  <option value=" " selected>---Select Day(s)---</option>
                  <option value=" " selected>---Select Day(s)---</option>
                  <option value=" " selected>---Select Day(s)---</option>
                  <option value=" " selected>---Select Day(s)---</option>
                  <option value=" " selected>---Select Day(s)---</option>
                  <option value=" " selected>---Select Day(s)---</option>
                  <option value=" " selected>---Select Day(s)---</option>
                  <option value=" " selected>---Select Day(s)---</option>
                  <option value=" " selected>---Select Day(s)---</option>
                  <option value=" " selected>---Select Day(s)---</option>
                  <option value=" " selected>---Select Day(s)---</option>
                  </select><p style="margin-top: 0; margin-bottom: 0">
                  &nbsp;</td>
                  

        </tr>

        <tr>

          <td width="39%" height="38" align="left" valign="top">

          <p style="margin-top: 0; margin-bottom: 0">

          <font face="Arial" size="1">Step 4 -- Select Date(s)</font></p>
                  <p style="margin-top: 0; margin-bottom: 0">
                  <select size="1" name="dates" onChange="date(this.options.selectedIndex)">
                  <option value=" " selected> </option>
                  <option value=" " selected>---Select Date(s)---</option>
                  <option value=" " selected>---Select Date(s)---</option>
                  <option value=" " selected>---Select Date(s)---</option>
                  <option value=" " selected>---Select Date(s)---</option>
                  <option value=" " selected>---Select Date(s)---</option>
                  <option value=" " selected>---Select Date(s)---</option>
                  <option value=" " selected>---Select Date(s)---</option>
                  <option value=" " selected>---Select Date(s)---</option>
                  <option value=" " selected>---Select Date(s)---</option>
                  <option value=" " selected>---Select Date(s)---</option>
                  <option value=" " selected>---Select Date(s)---</option>
                  </select<p style="margin-top: 0; margin-bottom: 0">
                  &nbsp;</td>

<script>
<!--


var groups=document.register.conference.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("---Select Grade Level---"," ");

group[1][0]=new Option("---Select Grade Level---"," ");
group[1][1]=new Option("PK-2","10");
group[1][2]=new Option("3-5","11");
group[1][3]=new Option("6-8","12");

group[2][0]=new Option("---Select Grade Level---"," ");
group[2][1]=new Option("2-8","13");

group[3][0]=new Option("---Select Grade Level---"," ");
group[3][1]=new Option("2-8","14");

group[4][0]=new Option("---Select Grade Level---"," ");
group[4][1]=new Option("2-8","15");

group[5][0]=new Option("---Select Grade Level---"," ");
group[5][1]=new Option("2-8","16");

group[6][0]=new Option("---Select Grade Level---"," ");
group[6][1]=new Option("6-12","17");

group[7][0]=new Option("---Select Grade Level---"," ");
group[7][1]=new Option("PK-2","18");
group[7][2]=new Option("3-8","19");

group[8][0]=new Option("---Select Grade Level---"," ");
group[8][1]=new Option("PK-2","20");

group[9][0]=new Option("---Select Grade Level---"," ");
group[9][1]=new Option("3-7","21");

group[10][0]=new Option("---Select Grade Level---"," ");
group[10][1]=new Option("2-5","22");

group[11][0]=new Option("---Select Grade Level---"," ");
group[11][1]=new Option("All Grade Levels","23");

var temp=document.register.grade


function conf(w){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[w].length;i++){
temp.options[i]=new Option(group[w][i].text,group[w][i].value)
}
temp.options[0].selected=true
grad(0)
}



var secondGroups=document.register.grade.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++)  {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++)  {
secondGroup[i][j]=new Array()  }}

secondGroup[0][0][0]=new Option("---Select Day(s)---"," ");
secondGroup[1][0][0]=new Option("---Select Day(s)---"," ");
secondGroup[1][1][0]=new Option("---Select Day(s)---"," ");
secondGroup[1][1][1]=new Option("Day 1 -- Foundations","24");
secondGroup[1][1][2]=new Option("Day 2 -- 15 Points of Distinction","25");
secondGroup[1][1][3]=new Option("Both Day 1 & Day 2","26");

secondGroup[1][2][0]=new Option("---Select Day(s)---"," ");
secondGroup[1][2][1]=new Option("Day 1 -- Foundations","27");
secondGroup[1][2][2]=new Option("Day 2 -- 15 Points of Distinction","28");
secondGroup[1][2][3]=new Option("Both Day 1 & Day 2","29");

secondGroup[1][3][0]=new Option("---Select Day(s)---"," ");
secondGroup[1][3][1]=new Option("Day 1 -- Foundations","30");
secondGroup[1][3][2]=new Option("Day 2 -- 15 Points of Distinction","31");
secondGroup[1][3][3]=new Option("Both Day 1 & Day 2","32");

secondGroup[2][0][0]=new Option("---Select Day(s)---"," ");
secondGroup[2][1][0]=new Option("---Select Day(s)---"," ");
secondGroup[2][1][1]=new Option("One Day Conference","33");

secondGroup[3][0][0]=new Option("---Select Day(s)---"," ");
secondGroup[3][1][0]=new Option("---Select Day(s)---"," ");
secondGroup[3][1][1]=new Option("One Day Conference","34");

secondGroup[4][0][0]=new Option("---Select Day(s)---"," ");
secondGroup[4][1][0]=new Option("---Select Day(s)---"," ");
secondGroup[4][1][1]=new Option("One Day Conference","35");

secondGroup[5][0][0]=new Option("---Select Day(s)---"," ");
secondGroup[5][1][0]=new Option("---Select Day(s)---"," ");
secondGroup[5][1][1]=new Option("One Day Conference","36");

secondGroup[6][0][0]=new Option("---Select Day(s)---"," ");
secondGroup[6][1][0]=new Option("---Select Day(s)---"," ");
secondGroup[6][1][1]=new Option("One Day Conference","37");

secondGroup[7][0][0]=new Option("---Select Day(s)---"," ");
secondGroup[7][1][0]=new Option("---Select Day(s)---"," ");
secondGroup[7][1][1]=new Option("4-Day Conference","38");

secondGroup[7][2][0]=new Option("---Select Day(s)---"," ");
secondGroup[7][2][1]=new Option("4-Day Conference","39");

secondGroup[8][0][0]=new Option("---Select Day(s)---"," ");
secondGroup[8][1][0]=new Option("---Select Day(s)---"," ");
secondGroup[8][1][1]=new Option("Day 1","40");
secondGroup[8][1][2]=new Option("Day 2","41");
secondGroup[8][1][3]=new Option("Both Day 1 & Day 2","42");

secondGroup[9][0][0]=new Option("---Select Day(s)---"," ");
secondGroup[9][1][0]=new Option("---Select Day(s)---"," ");
secondGroup[9][1][1]=new Option("Day 1","43");
secondGroup[9][1][2]=new Option("Day 2","44");
secondGroup[9][1][3]=new Option("Both Day 1 & Day 2","45");

secondGroup[10][0][0]=new Option("---Select Day(s)---"," ");
secondGroup[10][1][0]=new Option("---Select Day(s)---"," ");
secondGroup[10][1][1]=new Option("One Day Conference","46");

secondGroup[11][0][0]=new Option("---Select Day(s)---"," ");
secondGroup[11][1][0]=new Option("---Select Day(s)---"," ");
secondGroup[11][1][1]=new Option("One Day Conference","47");

var temp1=document.register.days

function grad(x){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.register.conference.options.selectedIndex][x].length;i++){
temp1.options[i]=new Option(secondGroup[document.register.conference.options.selectedIndex][x][i].text,secondGroup[document.register.conference.options.selectedIndex][x][i].value)
}
temp1.options[0].selected=true
day(0)
}


var thirdGroups=document.register.days.options.length
var thirdGroup=new Array(groups)
for (i=0; i<groups; i++)  {
thirdGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++)
thirdGroup[i][j]=new Array(group[j].length)
for (k=0; k<group[j].length; k++)  {
thirdGroup[i][j][k]=new Array()  }}


thirdGroup[0][0][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][0][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][1][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][1][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][1][1][1]=new Option("October 2, 2008"," ");
thirdGroup[1][1][1][2]=new Option("November 6, 2008"," ");
thirdGroup[1][1][1][3]=new Option("December 4, 2008"," ");

thirdGroup[1][1][2][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][1][2][1]=new Option("October 3, 2008"," ");



thirdGroup[1][1][2][2]=new Option("November 7, 2008"," ");
thirdGroup[1][1][2][3]=new Option("December 5, 2008"," ");

thirdGroup[1][1][3][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][1][3][1]=new Option("October 2 & 3, 2008"," ");
thirdGroup[1][1][3][2]=new Option("November 6 & 7, 2008"," ");
thirdGroup[1][1][3][3]=new Option("December 4 & 5, 2008"," ");

thirdGroup[1][2][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][2][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][2][1][1]=new Option("September 22, 2008"," ");
thirdGroup[1][2][1][2]=new Option("October 9, 2008"," ");
thirdGroup[1][2][1][3]=new Option("October 20, 2008"," ");
thirdGroup[1][2][1][4]=new Option("November 6, 2008"," ");
thirdGroup[1][2][1][5]=new Option("December 4, 2008"," ");

thirdGroup[1][2][2][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][2][2][1]=new Option("September 23, 2008"," ");
thirdGroup[1][2][2][2]=new Option("October 10, 2008"," ");
thirdGroup[1][2][2][3]=new Option("October 21, 2008"," ");
thirdGroup[1][2][2][4]=new Option("November 7, 2008"," ");
thirdGroup[1][2][2][5]=new Option("December 5, 2008"," ");

thirdGroup[1][2][3][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][2][3][1]=new Option("September 22 & 23, 2008"," ");
thirdGroup[1][2][3][2]=new Option("October 9 & 10, 2008"," ");
thirdGroup[1][2][3][3]=new Option("October 20 & 21, 2008"," ");
thirdGroup[1][2][3][4]=new Option("November 6 & 7, 2008"," ");
thirdGroup[1][2][3][5]=new Option("December 4 & 5, 2008"," ");

thirdGroup[1][3][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][3][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][3][1][1]=new Option("October 16, 2008"," ");
thirdGroup[1][3][1][2]=new Option("November 13, 2008"," ");

thirdGroup[1][3][2][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][3][2][1]=new Option("October 17, 2008"," ");
thirdGroup[1][3][2][2]=new Option("November 14, 2008"," ");

thirdGroup[1][3][3][0]=new Option("---Select Date(s)---"," ");
thirdGroup[1][3][3][1]=new Option("October 16 & 17, 2008"," ");
thirdGroup[1][3][3][2]=new Option("November 13 & 14, 2008"," ");

thirdGroup[2][0][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[2][1][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[2][1][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[2][1][1][1]=new Option("October 6, 2008"," ");
thirdGroup[2][1][1][2]=new Option("November 10, 2008"," ");

thirdGroup[3][0][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[3][1][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[3][1][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[3][1][1][1]=new Option("November 17, 2008"," ");

thirdGroup[4][0][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[4][1][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[4][1][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[4][1][1][1]=new Option("November 18, 2008"," ");

thirdGroup[5][0][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[5][1][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[5][1][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[5][1][1][1]=new Option("***Coming Soon!!***"," ");

thirdGroup[6][0][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[6][1][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[6][1][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[6][1][1][1]=new Option("October 17, 2008"," ");
thirdGroup[6][1][1][2]=new Option("November 14, 2008"," ");

thirdGroup[7][0][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[7][1][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[7][1][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[7][1][1][1]=new Option("***Coming Soon!!***"," ");

thirdGroup[8][0][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[8][1][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[8][1][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[8][1][1][1]=new Option("September 23, 2008"," ");


thirdGroup[8][1][2][0]=new Option("---Select Date(s)---"," ");
thirdGroup[8][1][2][1]=new Option("September 24, 2008"," ");

thirdGroup[8][1][3][0]=new Option("---Select Date(s)---"," ");
thirdGroup[8][1][3][1]=new Option("September 23 & 24, 2008"," ");

thirdGroup[9][0][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[9][1][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[9][1][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[9][1][1][1]=new Option("October 22, 2008"," ");
thirdGroup[9][1][1][2]=new Option("November 11, 2008"," ");

thirdGroup[9][1][2][0]=new Option("---Select Date(s)---"," ");
thirdGroup[9][1][2][1]=new Option("October 23, 2008"," ");
thirdGroup[9][1][2][2]=new Option("November 12, 2008"," ");

thirdGroup[9][1][3][0]=new Option("---Select Date(s)---"," ");
thirdGroup[9][1][3][1]=new Option("October 22 & 23, 2008"," ");
thirdGroup[9][1][3][2]=new Option("November 11 & 12, 2008"," ");

thirdGroup[10][0][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[10][1][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[10][1][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[10][1][1][1]=new Option("October 24, 2008"," ");
thirdGroup[10][1][1][2]=new Option("November 13, 2008"," ");

thirdGroup[11][0][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[11][1][0][0]=new Option("---Select Date(s)---"," ");
thirdGroup[11][1][1][0]=new Option("---Select Date(s)---"," ");
thirdGroup[11][1][1][1]=new Option("October 14, 2008"," ");
thirdGroup[11][1][1][2]=new Option("October 15, 2008"," ");
thirdGroup[11][1][1][3]=new Option("November 11, 2008"," ");

var temp2=document.register.dates

function day(y){
for (m=temp2.options.length-1;m>0;m--)
temp2.options[m]=null
for (i=0;i<thirdGroup[document.register.conference.options.selectedIndex][y].length;i++){
temp2.options[i]=new Option(thirdGroup[document.register.conference.options.selectedIndex][y][i].text,thirdGroup[document.register.conference.options.selectedIndex][y][i].value)
}
temp2.options[0].selected=true
}


function date(z){
window.location=temp2[z].value
}

//-->
</script>


</form>

</body>Start Free Trial
 
Keywords: How to populate 4 drop down menus
Title
1 CSS Cross Browser Drop Down Horiz…
2 voice recognition on nokia e65
3 Spry Menu Submenu's appear to the r…
4 CSS Horizontal Menu
5 CSS menu
6 Help with menu in CSS
 
Loading Advertisement...
 
[+][-]06.26.2008 at 08:49PM PDT, ID: 21880867

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06.26.2008 at 08:51PM PDT, ID: 21880874

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06.27.2008 at 06:11AM PDT, ID: 21883250

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: JavaScript, Hypertext Markup Language (HTML), Dynamic HTML (DHTML)
Tags: Javascript, IE and FF
Sign Up Now!
Solution Provided By: Jester_48
Participating Experts: 2
Solution Grade: A
 
 
[+][-]06.30.2008 at 04:56AM PDT, ID: 21898272

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628