Menu
I’ve been trying to set up a form with 2 chained select lists; the first list allows a visitor to select a year, whereupon the second list is populated with months (not necessarily all months); they then select the month they want from the second list, click the Go button and should be sent to the page for that month (the pages are HTML calendars of swim meet schedules).
I’m using [url=http://www.dynamicdrive.com/dynamicindex1/chainedmenu/]this script[i]BTW, if you go to the link above, don’t use the script included in their downloadable zip file, as they forgot to include their updated script with the new capability, instead including the original script which doesn’t have this functionality. You can get the script they are actually using [url=http://www.dynamicdrive.com/dynamicindex1/chainedmenu/chainedmenu.js]here
The bit I’m having trouble with is:
[code]
var onclickaction=””
var newwindow=””
function goListGroup(){
for (i=arguments.length-1;i>=0; i–){
if (arguments[i].selectedIndex!=-1){
var selectedOptionvalue=arguments[i].options[arguments[i].selectedIndex].value
if (selectedOptionvalue!=””){
if (onclickaction==”alert”)
alert(selectedOptionvalue)
else if (newwindow==1)
window.open(selectedOptionvalue)
else
window.location=selectedOptionvalue
break
}
}
}
}
Note, I had to add the [b]var newwindow
If I have [b]newwindow[b]newwindow[b]window.location=selectedOptionvalue
Here is the HTML I’m using (a bit stripped down to show just the points relating to the script):
[code]
<head>
<script language=”javascript” src=”chainedselects.js”></script>
<script language=”javascript” src=”calendar_selector_data.js”></script>
</head>
[code]
<body onload=”initListGroup(‘calendars’, document.calmenu.year, document.calmenu.month)”>
[code]
<form action=”” name=”calmenu” id=”calmenu”>
<table align=”center”>
<tr>
<td><select name=”year” style=”width:95px;”></select></td>
<td><select name=”month” style=”width:95px;”></select></td>
<td><input type=”submit” value=”Go” onclick=”goListGroup(document.calmenu.year, document.calmenu.month)”>
</tr>
</table>
</form>
And here is the data file I’ve put together that is initialized with the script:
[code]
//var hide_empty_list=true; //uncomment this line to hide empty selection lists
//var disable_empty_list=true; //uncomment this line to disable empty selection lists
addListGroup(“calendars”, “year-list”);
addOption(“year-list”, “Select Year”, “”, “”, 1);
addList(“year-list”, “2004”, “2004”, “2004”);
addList(“year-list”, “2005”, “2005”, “2005”);
addList(“year-list”, “2006”, “2006”, “2006”);
addOption(“2004”, “Select Month”, “”);
addOption(“2004”, “January”, “january.html”);
addOption(“2004”, “February”, “february.html”);
addOption(“2004”, “March”, “march.html”);
addOption(“2004”, “April”, “april.html”);
addOption(“2004”, “May”, “may.html”);
addOption(“2004”, “June”, “june.html”);
addOption(“2004”, “July”, “july.html”);
addOption(“2004”, “August”, “august.html”);
addOption(“2004”, “September”, “september.html”);
addOption(“2004”, “October”, “october.html”);
addOption(“2004”, “November”, “november.html”);
addOption(“2004”, “December”, “december.html”);
addOption(“2005”, “Select Month”, “”);
addOption(“2005”, “January”, “january.html”);
addOption(“2005”, “February”, “february.html”);
addOption(“2005”, “March”, “march.html”);
addOption(“2005”, “April”, “april.html”);
addOption(“2005”, “May”, “may.html”);
addOption(“2005”, “June”, “june.html”);
addOption(“2005”, “July”, “july.html”);
addOption(“2005”, “August”, “august.html”);
addOption(“2005”, “September”, “september.html”);
addOption(“2005”, “October”, “october.html”);
addOption(“2005”, “November”, “november.html”);
addOption(“2005”, “December”, “december.html”);
addOption(“2006”, “Select Month”, “”);
addOption(“2006”, “January”, “january.html”);
addOption(“2006”, “February”, “february.html”);
addOption(“2006”, “March”, “march.html”);
addOption(“2006”, “April”, “april.html”);
addOption(“2006”, “May”, “may.html”);
addOption(“2006”, “June”, “june.html”);
addOption(“2006”, “July”, “july.html”);
addOption(“2006”, “August”, “august.html”);
addOption(“2006”, “September”, “september.html”);
addOption(“2006”, “October”, “october.html”);
addOption(“2006”, “November”, “novemeber.html”);
addOption(“2006”, “December”, “december.html”);
What I really want is for the 2 select lists to open the page within an iframe on the current page but right now I’m just trying to get it to open on the current page at all. Any help on this would be greatly appreciated! Thanks.