Changing dropdown menu bar options

jsmallbridge · Aug 3, 2003

Hi.
I am trying to create a specific type of HTML form using menubars.

Consider a case where we have 2 drop down menu bars:

Snack Type [_____]
Specific Snack [_____]

The first menu bar has 2 possible options:
1a. Fruit
1b. Ice-Cream

The 2nd menu bar has also 2 possible options for each option defined above. For example, if user picked fruit for the 1st menu-bar, then

2a. Apples
2b. Oranges

If the user picked Ice-cream for the 1st menubar:
2a. Chocolate Chip
2b. Vanilla

The 2nd menu-bar should be blank until a selection has been made from the 1st menu-bar.

I assume I need some sort of javascript to do this. So how can a accomplish this?

Thanks,
--JS

dwarfthrower · Aug 3, 2003

What is a "menubar", some variation of the <select> tag?

If so, you would create an array which forms the possible options for the first select object. And an Array of Arrays for the options belonging to the second. Then depending on the value of the first, re-populate the option list of the second.

Code:

<script>
var firstList = new Array(&quot;Fruit&quot;,&quot;Ice Cream&quot;);
var secondList = new Array([&quot;Apples&quot;,&quot;Oranges&quot;],[&quot;Anchovy&quot;,&quot;Sauerkraut&quot;]);

//repopulates the second select based on the contents
//of the arrays
function repop2ndList(select1, select2){
 //get the selected index of the first <select>
 var selection = select1.selectedIndex;

 //clear the second select
 for(i=0, i<select2.options.length; i++){
  select2.options[i] = null;
 }
 
 //create new options for all elements in the array of
 //choices
 for(i=0, i<secondList[selection].length; i++){
  select2.options[i] = new Option(secondList[selection][i]);
 }
}

//populates the first selection list
function popFirst(select1){
 for(i=0, i<firstList.length; i++){
  select2.options[i] = new Option(firstList[i]);
 }
}
</script>
[code]

You would set up your first and second select objects like so:
[code]
<select name=&quot;choice1&quot; onclick=&quot;repop2ndList(this.form.choice1, this.form.choice2);&quot;></select>
<select name=&quot;choice2&quot;></select>

And start the ball rolling by populating the first list on Load:

Code:

<body onload=&quot;popFirst(document.FormName.choice1);&quot;>

sdi · Aug 4, 2003

I would want to populate the first list when the form loads rather than when a selection is made, however, here is something to help you out.

<html>
<head>
<script language="JavaScript">
function myselect()
{
if(document.form1.choose1.options[document.form1.choose1.selectedIndex].text == "Fruits&quot

{
var mychoose2 = document.form1.choose2;
for(choose2list = 1; choose2list <= document.form1.choose2.length; choose2list++)
{
document.form1.choose2.options[choose2list] = null;
}
mychoose2.options[0] = new Option("Apples&quot

;
mychoose2.options[1] = new Option("Oranges&quot

;
}
if(document.form1.choose1.options[document.form1.choose1.selectedIndex].text == "Ice Cream&quot

{
var mychoose2 = document.form1.choose2;
for(choose2list = 1; choose2list <= document.form1.choose2.length; choose2list++)
{
document.form1.choose2.options[choose2list] = null;
}
mychoose2.options[0] = new Option("Chocolate Chip&quot

;
mychoose2.options[1] = new Option("Vanilla&quot

;
}
}
</script>
</head>
<body>
<form name="form1">
<select name="choose1" onchange="return myselect()";>
<option>Fruits</option>
<option>Ice Cream</option>
</select>
<select name="choose2" onchange="return myselect()";>
<option></option>
</select>
</form>
</body>
</html>

Good luck with it,
Brian

jsmallbridge · Aug 4, 2003

Thanks for your help guys. Both solutions work!

--JS

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Changing dropdown menu bar options

jsmallbridge

Programmer

dwarfthrower

Programmer

sdi

Technical User

jsmallbridge

Programmer

Similar threads

Part and Inventory Search

Sponsor