asked on

Double Dynamic Select Menu

Hello Experts,

I am trying to create a "double dynamic select menu" by marrying two separate bits of JavaScript functionality.

Part 1 is a set of two selects, in which the second select menu is populated based on the item selected in the first menu. The code to do that, based on code from this Experts Exchange page, is represented immediately below.

<script language="javascript">
var lists = new Array();

// First set of text and values
lists['North American']    = new Array();
lists['North American'][0] = new Array(
      'English NA',
      'French NA',
	  'Spanish NA'
);
lists['North American'][1] = new Array(
      'http://your-web-site.com/EnglishNA.htm',
      'http://your-web-site.com/FrenchNA.htm',
	  'http://your-web-site.com/SpanishNA.htm'
);
// Second set of text and values
lists['Europe']    = new Array();
lists['Europe'][0] = new Array(
      'English EU',
      'French EU',
	  'Spanish EU'
);
lists['Europe'][1] = new Array(
      'http://your-web-site.com/EnglishEU.htm',
      'http://your-web-site.com/FrenchEU.htm',
	  'http://your-web-site.com/SpanishEU.htm'
);

function changeList( box ) {
      list = lists[box.options[box.selectedIndex].value];
      emptyList( box.form.slave );
      fillList( box.form.slave, list );
}
function emptyList( box ) {
      while ( box.options.length ) box.options[0] = null;
}
function fillList( box, arr ) {
      for ( i = 0; i < arr[0].length; i++ ) {
            option = new Option( arr[0][i], arr[1][i] );
            box.options[box.length] = option;
      }
      box.selectedIndex=0;
}
</script>
</head>

<BODY onload="changeList(document.forms['drops'].master)">

<form name="drops" method="get" action="#">
<select name="master" size=1 onchange="changeList(this)">
<option value="North American">North American
<option value="Europe">Europe
</select>

&nbsp;&nbsp;&nbsp;&nbsp;

<select name="slave" size=1>
<option>Netscape 4 width
</select>
</form>

Open in new window

Part 2 is a select menu that upon making a selection, immediately initiates an event, taking the user to a selected website. That code is represented immediately below.

<form action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="">Choose a destination...</option>
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.google.com/">GOOGLE</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
    <option value="http://www.amazon.com/">AMAZON</option>
    <option value="http://artlung.com/">ARTLUNG</option>
</select>
</form>

Open in new window

My question is: How can I combine these two functions, so that when a user makes a selection in select 1... select 2 is populated based on that selection... and then... when a selection is made from select 2... the user is immediately taken to that page, (without the use of a submit button)?

Can you help me with the "double dynamic select menu"?

Thanks,

Tom

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

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

Start Free Trial

PierceWeb

ASKER

mplungjan,

That works great!

Thank you very much for your expert assistance!

I really appreciate your help!

Tom

PierceWeb

ASKER

mplungjan conquers the elusive "Double Dynamic Select Menu".

Excellent solution! Thanks

Michel Plungjan

You are welcome :)