OK I have selected this really easily configurable menu code, but I can't figure what I need to do to use 2 (or more) on a page. (I figured out how to make many single drop menus work by naming them, but this one is a little more complex). It's a BEAUTIFUL code and I know there's a way to identify each menu separately, I just don't know where to start.
Here are the codes for the two menus I want to use:
=======
Menu 1 U.S. Ski sites:
------------
<html>
<head>
<title>Dynamic Select Menus</title>
<SCRIPT language="javascript">
<!-- hide jscript from old browsers ---
function refresh_screen()
{
window.location.reload()
}
/****** this object holds all of the key data **********/
function Link(name, url)
{
this.name = name;
this.title = new Array();
this.url = new Array();
}
/**************************************************************/
var names = new Array ();
var temp = new Array ();
var temp2 = new Array ();
var link = new Link ();
var final_list = new Array ();
/******** array declaration... it holds all of the data for the menus ****/
var menu = new Array (
"Colorado*http://skitravelweb.com/skius/aspenx.html|Aspen#" +
"http://skitravelweb.com/skius/breckenridgex.html|Breckenridge#" +
"http://skitravelweb.com/skius/keystonex.html|Keystone#" +
"http://skitravelweb.com/skius/coppermtx.html|Copper Mountain#" +
"http://skitravelweb.com/skius/crestedbuttex.html|Crested Butte#" +
"http://skitravelweb.com/skius/winterparkx.html|Winter Park#" +
"http://skitravelweb.com/skius/vailx.html|Vail#" +
"http://skitravelweb.com/skius/beavercrkx.html|Beaver Creek#" +
"http://skitravelweb.com/skius/snowmassx.html|Snowmass#" +
"http://skitravelweb.com/skius/purgatoryx.html|Purgatory#" +
"http://skitravelweb.com/skius/telluridex.html|Telluride#" +
"http://skitravelweb.com/skius/steamboatx.html|Steamboat",
"Nevada*http://skitravelweb.com/skius/stahoex.html|Tahoe#" +
"http://skitravelweb.com/skius/squawvlx.html|Squaw Valley",
"New York*http://skitravelweb.com/skius/newyorkx.html|Lake Placid#",
"Wyoming*http://skitravelweb.com/skius/wyomingx.html|Jackson Hole",
"New Mexico*http://skitravelweb.com/skius/newmexx.html|Taos",
"Vermont*http://skitravelweb.com/skius/stowex.html|Stowe#" +
"http://skitravelweb.com/skius/smugnotchx.html|Smugglers Notch#" +
"http://skitravelweb.com/skius/sugarbushx.html|Sugarbush#" +
"http://skitravelweb.com/skius/killingtonx.html|Killington",
"Utah*http://skitravelweb.com/skius/saltlakex.html|Salt Lake#" +
"http://skitravelweb.com/skius/snowbirdx.html|Snowbird#" +
"http://skitravelweb.com/skius/parkcityx.html|Park City");
/*****************************************************************/
function updateMenus ( what ) {
var n = what.selectedIndex;
what.form.myLinks.length = final_list[n].title.length;
for (var x = 0; x < what.form.myLinks.length; x++)
{
what.form.myLinks.options[x].text = final_list[n].title[x];
what.form.myLinks.options[x].value = final_list[n].url[x];
}
what.form.myLinks.selectedIndex = 0;
}
/**************************************************************/
function give_names ()
{
document.myForm.main.length = names.length;
document.myForm.myLinks.length = final_list[0].title.length;
for ( var i=0; i<names.length; i++ )
document.myForm.main.options.text = final_list.name;
for (var x=0; x<final_list[0].url.length; x++)
document.myForm.myLinks.options[x].value = final_list[0].url[x];
for (var x=0; x<final_list[0].title.length; x++)
document.myForm.myLinks.options[x].text = final_list[0].title[x];
}
/**************************************************************/
function createMenus () {
for ( var i=0; i < menu.length; i++ )
{
names = menu.split("*");
link = new Link(names[0]);
temp = names[1].split("#");
final_list = link;
for (var x=0; x<temp.length; x++)
{
temp2[x] = temp[x].split("|");
final_list.url[x] = temp2[x][0];
final_list.title[x] = temp2[x][1];
}
}
give_names();
}
/**************************************************************/
// end jscript hiding -->
</SCRIPT>
</head>
<BODY onLoad="createMenus()">
<FORM NAME="myForm">
<INPUT TYPE="hidden" NAME="myObject" VALUE=http://www.webdeveloper.com/forum/archive/index.php/"none">
<SELECT NAME="main" size=1 onChange="updateMenus(this)">
<option>
<option>
<option>
</SELECT>
<font face="arial"><font color="000066"><font size="2">then <br>Choose Area
<SELECT NAME="myLinks" SIZE=1 >
<option>
<option>
<option>
</SELECT>
<input type=button value=go onClick=window.open(document.myForm.myLinks.options[document.myForm.myLinks.selectedIndex].value)>
</form>
</body>
</html>
=========
menu #2 European Ski Sites
--------
<html>
<head>
<title>Dynamic Select Menus</title>
<SCRIPT language="javascript">
<!-- hide jscript from old browsers ---
function refresh_screen()
{
window.location.reload()
}
/****** this object holds all of the key data **********/
function Link(name, url)
{
this.name = name;
this.title = new Array();
this.url = new Array();
}
/**************************************************************/
var names = new Array ();
var temp = new Array ();
var temp2 = new Array ();
var link = new Link ();
var final_list = new Array ();
/******** array declaration... it holds all of the data for the menus ****/
var menu = new Array (
"France*http://skitravelweb.com/skieurocan/chamonixx.html|Chamonix#" +
"http://skitravelweb.com/skieurocan/morzinex.htmlMorzine#" +
"http://skitravelweb.com/skieurocan/tignesx.html|Tignes#" +
"http://skitravelweb.com/skieurocan/troisvalx.html|Trois Vallees",
"Austria*http://skitravelweb.com/skieurocan/innsbruckx.html|Innsbruck#" +
"http://skitravelweb.com/skieurocan/kitzbuhelx.html|Kitzbuhel",
"Switzerland*http://skitravelweb.com/skieurocan/jungfraux.html|Jungfrau#"+
"http://skitravelweb.com/skieurocan/stmoritzx.htmlSt. Moritz",
"Italy*http://skitravelweb.com/skieurocan/cervinax.html|Cervina#"+
"http://skitravelweb.com/skieurocan/courmayeurx.html|Courmayeur#"+
"http://skitravelweb.com/skieurocan/bormiox.html|Bormio",
"Germany*http://skitravelweb.com/skieurocan/germanyx.html|Garmisch");
/*****************************************************************/
function updateMenus ( what ) {
var n = what.selectedIndex;
what.form.myLinks.length = final_list[n].title.length;
for (var x = 0; x < what.form.myLinks.length; x++)
{
what.form.myLinks.options[x].text = final_list[n].title[x];
what.form.myLinks.options[x].value = final_list[n].url[x];
}
what.form.myLinks.selectedIndex = 0;
}
/**************************************************************/
function give_names ()
{
document.myForm.main.length = names.length;
document.myForm.myLinks.length = final_list[0].title.length;
for ( var i=0; i<names.length; i++ )
document.myForm.main.options.text = final_list.name;
for (var x=0; x<final_list[0].url.length; x++)
document.myForm.myLinks.options[x].value = final_list[0].url[x];
for (var x=0; x<final_list[0].title.length; x++)
document.myForm.myLinks.options[x].text = final_list[0].title[x];
}
/**************************************************************/
function createMenus () {
for ( var i=0; i < menu.length; i++ )
{
names = menu.split("*");
link = new Link(names[0]);
temp = names[1].split("#");
final_list = link;
for (var x=0; x<temp.length; x++)
{
temp2[x] = temp[x].split("|");
final_list.url[x] = temp2[x][0];
final_list.title[x] = temp2[x][1];
}
}
give_names();
}
/**************************************************************/
// end jscript hiding -->
</SCRIPT>
</head>
<BODY onLoad="createMenus()">
<FORM NAME="myForm">
<INPUT TYPE="hidden" NAME="myObject" VALUE="none">
<SELECT NAME="main" size=1 onChange="updateMenus(this)">
<option>
<option>
<option>
</SELECT>
<font face="arial"><font color="000066"><font size="2">then <br>Choose Area
<SELECT NAME="myLinks" SIZE=1 >
<option>
<option>
<option>
</SELECT>
<input type=button value=go onClick=window.open(document.myForm.myLinks.options[document.myForm.myLinks.selectedIndex].value)>
</form>
</body>
</html>
Here are the codes for the two menus I want to use:
=======
Menu 1 U.S. Ski sites:
------------
<html>
<head>
<title>Dynamic Select Menus</title>
<SCRIPT language="javascript">
<!-- hide jscript from old browsers ---
function refresh_screen()
{
window.location.reload()
}
/****** this object holds all of the key data **********/
function Link(name, url)
{
this.name = name;
this.title = new Array();
this.url = new Array();
}
/**************************************************************/
var names = new Array ();
var temp = new Array ();
var temp2 = new Array ();
var link = new Link ();
var final_list = new Array ();
/******** array declaration... it holds all of the data for the menus ****/
var menu = new Array (
"Colorado*http://skitravelweb.com/skius/aspenx.html|Aspen#" +
"http://skitravelweb.com/skius/breckenridgex.html|Breckenridge#" +
"http://skitravelweb.com/skius/keystonex.html|Keystone#" +
"http://skitravelweb.com/skius/coppermtx.html|Copper Mountain#" +
"http://skitravelweb.com/skius/crestedbuttex.html|Crested Butte#" +
"http://skitravelweb.com/skius/winterparkx.html|Winter Park#" +
"http://skitravelweb.com/skius/vailx.html|Vail#" +
"http://skitravelweb.com/skius/beavercrkx.html|Beaver Creek#" +
"http://skitravelweb.com/skius/snowmassx.html|Snowmass#" +
"http://skitravelweb.com/skius/purgatoryx.html|Purgatory#" +
"http://skitravelweb.com/skius/telluridex.html|Telluride#" +
"http://skitravelweb.com/skius/steamboatx.html|Steamboat",
"Nevada*http://skitravelweb.com/skius/stahoex.html|Tahoe#" +
"http://skitravelweb.com/skius/squawvlx.html|Squaw Valley",
"New York*http://skitravelweb.com/skius/newyorkx.html|Lake Placid#",
"Wyoming*http://skitravelweb.com/skius/wyomingx.html|Jackson Hole",
"New Mexico*http://skitravelweb.com/skius/newmexx.html|Taos",
"Vermont*http://skitravelweb.com/skius/stowex.html|Stowe#" +
"http://skitravelweb.com/skius/smugnotchx.html|Smugglers Notch#" +
"http://skitravelweb.com/skius/sugarbushx.html|Sugarbush#" +
"http://skitravelweb.com/skius/killingtonx.html|Killington",
"Utah*http://skitravelweb.com/skius/saltlakex.html|Salt Lake#" +
"http://skitravelweb.com/skius/snowbirdx.html|Snowbird#" +
"http://skitravelweb.com/skius/parkcityx.html|Park City");
/*****************************************************************/
function updateMenus ( what ) {
var n = what.selectedIndex;
what.form.myLinks.length = final_list[n].title.length;
for (var x = 0; x < what.form.myLinks.length; x++)
{
what.form.myLinks.options[x].text = final_list[n].title[x];
what.form.myLinks.options[x].value = final_list[n].url[x];
}
what.form.myLinks.selectedIndex = 0;
}
/**************************************************************/
function give_names ()
{
document.myForm.main.length = names.length;
document.myForm.myLinks.length = final_list[0].title.length;
for ( var i=0; i<names.length; i++ )
document.myForm.main.options.text = final_list.name;
for (var x=0; x<final_list[0].url.length; x++)
document.myForm.myLinks.options[x].value = final_list[0].url[x];
for (var x=0; x<final_list[0].title.length; x++)
document.myForm.myLinks.options[x].text = final_list[0].title[x];
}
/**************************************************************/
function createMenus () {
for ( var i=0; i < menu.length; i++ )
{
names = menu.split("*");
link = new Link(names[0]);
temp = names[1].split("#");
final_list = link;
for (var x=0; x<temp.length; x++)
{
temp2[x] = temp[x].split("|");
final_list.url[x] = temp2[x][0];
final_list.title[x] = temp2[x][1];
}
}
give_names();
}
/**************************************************************/
// end jscript hiding -->
</SCRIPT>
</head>
<BODY onLoad="createMenus()">
<FORM NAME="myForm">
<INPUT TYPE="hidden" NAME="myObject" VALUE=http://www.webdeveloper.com/forum/archive/index.php/"none">
<SELECT NAME="main" size=1 onChange="updateMenus(this)">
<option>
<option>
<option>
</SELECT>
<font face="arial"><font color="000066"><font size="2">then <br>Choose Area
<SELECT NAME="myLinks" SIZE=1 >
<option>
<option>
<option>
</SELECT>
<input type=button value=go onClick=window.open(document.myForm.myLinks.options[document.myForm.myLinks.selectedIndex].value)>
</form>
</body>
</html>
=========
menu #2 European Ski Sites
--------
<html>
<head>
<title>Dynamic Select Menus</title>
<SCRIPT language="javascript">
<!-- hide jscript from old browsers ---
function refresh_screen()
{
window.location.reload()
}
/****** this object holds all of the key data **********/
function Link(name, url)
{
this.name = name;
this.title = new Array();
this.url = new Array();
}
/**************************************************************/
var names = new Array ();
var temp = new Array ();
var temp2 = new Array ();
var link = new Link ();
var final_list = new Array ();
/******** array declaration... it holds all of the data for the menus ****/
var menu = new Array (
"France*http://skitravelweb.com/skieurocan/chamonixx.html|Chamonix#" +
"http://skitravelweb.com/skieurocan/morzinex.htmlMorzine#" +
"http://skitravelweb.com/skieurocan/tignesx.html|Tignes#" +
"http://skitravelweb.com/skieurocan/troisvalx.html|Trois Vallees",
"Austria*http://skitravelweb.com/skieurocan/innsbruckx.html|Innsbruck#" +
"http://skitravelweb.com/skieurocan/kitzbuhelx.html|Kitzbuhel",
"Switzerland*http://skitravelweb.com/skieurocan/jungfraux.html|Jungfrau#"+
"http://skitravelweb.com/skieurocan/stmoritzx.htmlSt. Moritz",
"Italy*http://skitravelweb.com/skieurocan/cervinax.html|Cervina#"+
"http://skitravelweb.com/skieurocan/courmayeurx.html|Courmayeur#"+
"http://skitravelweb.com/skieurocan/bormiox.html|Bormio",
"Germany*http://skitravelweb.com/skieurocan/germanyx.html|Garmisch");
/*****************************************************************/
function updateMenus ( what ) {
var n = what.selectedIndex;
what.form.myLinks.length = final_list[n].title.length;
for (var x = 0; x < what.form.myLinks.length; x++)
{
what.form.myLinks.options[x].text = final_list[n].title[x];
what.form.myLinks.options[x].value = final_list[n].url[x];
}
what.form.myLinks.selectedIndex = 0;
}
/**************************************************************/
function give_names ()
{
document.myForm.main.length = names.length;
document.myForm.myLinks.length = final_list[0].title.length;
for ( var i=0; i<names.length; i++ )
document.myForm.main.options.text = final_list.name;
for (var x=0; x<final_list[0].url.length; x++)
document.myForm.myLinks.options[x].value = final_list[0].url[x];
for (var x=0; x<final_list[0].title.length; x++)
document.myForm.myLinks.options[x].text = final_list[0].title[x];
}
/**************************************************************/
function createMenus () {
for ( var i=0; i < menu.length; i++ )
{
names = menu.split("*");
link = new Link(names[0]);
temp = names[1].split("#");
final_list = link;
for (var x=0; x<temp.length; x++)
{
temp2[x] = temp[x].split("|");
final_list.url[x] = temp2[x][0];
final_list.title[x] = temp2[x][1];
}
}
give_names();
}
/**************************************************************/
// end jscript hiding -->
</SCRIPT>
</head>
<BODY onLoad="createMenus()">
<FORM NAME="myForm">
<INPUT TYPE="hidden" NAME="myObject" VALUE="none">
<SELECT NAME="main" size=1 onChange="updateMenus(this)">
<option>
<option>
<option>
</SELECT>
<font face="arial"><font color="000066"><font size="2">then <br>Choose Area
<SELECT NAME="myLinks" SIZE=1 >
<option>
<option>
<option>
</SELECT>
<input type=button value=go onClick=window.open(document.myForm.myLinks.options[document.myForm.myLinks.selectedIndex].value)>
</form>
</body>
</html>