Forums
This topic is locked
Related dropdown menus
Posted 08 Jun 2005 18:22:37
1
has voted
08 Jun 2005 18:22:37 Nikkisha Barnard posted:
Hi,I'm new to javascript. I have three menus and I want the second and third menus to be related to the first menu. In other words, I want the 2nd and 3rd menus to change based on what the user selects in the first menu. I put this code in one HTML file and I keep geting this error from explorer and mozilla that document.form[0] is null or is not an object or theform porperties are empty. Someone please help the code is below:
<body bgcolor="#FFFFFF" text="#FFFFFF" link="#666666" vlink="#666666" alink="#FF0000" onLoad="tees1.init(document.form[0]); tees2.init(document.form[0]); MM_preloadImages('WFM2_02.gif','WFM2_03.gif','WFM2_09.gif','WFM2_07.gif')">
<script language="JavaScript" type="text/JavaScript">
function DynamicOptionList() {
if (arguments.length < 2) { alert("Not enough arguments in DynamicOptionList()"
; }// Name of the list containing dynamic values
this.target = arguments[0];
// Set the lists that this dynamic list depends on
this.dependencies = new Array();
for (var i=1; i<arguments.length; i++) {
this.dependencies[this.dependencies.length] = arguments[i];
}
// The form this list belongs to
this.form = null;
// Place-holder for currently-selected values of dependent select lists
this.dependentValues = new Object();
// Hold default values to be selected for conditions
this.defaultValues = new Object();
// Storage for the dynamic values
this.options = new Object();
// Delimiter between dependent values
this.delimiter = "|";
// Logest string currently a potential options (for Netscape)
this.longestString = "";
// The total number of options that might be displayed, to build dummy options (for Netscape)
this.numberOfOptions = 0;
// Method mappings
this.addOptions = DOL_addOptions;
this.populate = DOL_populate;
this.setDelimiter = DOL_setDelimiter;
this.setDefaultOption = DOL_setDefaultOption;
this.printOptions = DOL_printOptions;
this.init = DOL_init;
}
// Set the delimiter to something other than | when defining condition values
function DOL_setDelimiter(val) {
this.delimiter = val;
}
// Set the default option to be selected when the list is painted
function DOL_setDefaultOption(condition, val) {
if (typeof this.defaultValues[condition] == "undefined" | | this.defaultValues[condition]==null) {
this.defaultValues[condition] = new Object();
}
for (var i=1; i<arguments.length; i++) {
this.defaultValues[condition][arguments[i]]=1;
}
}
// Init call to map the form to the object and populate it
function DOL_init(theform) {
this.form = theform;
this.populate();
}
// Add options to the list.
// Pass the condition string, then the list of text/value pairs that populate the list
function DOL_addOptions(dependentValue) {
if (typeof this.options[dependentValue] != "object"
{ this.options[dependentValue] = new Array(); }for (var i=1; i<arguments.length; i+=2) {
// Keep track of the longest potential string, to draw the option list
if (arguments[i].length > this.longestString.length) {
this.longestString = arguments[i];
}
this.numberOfOptions++;
this.options[dependentValue][this.options[dependentValue].length] = arguments[i];
this.options[dependentValue][this.options[dependentValue].length] = arguments[i+1];
}
}
// Print dummy options so Netscape behaves nicely
function DOL_printOptions() {
// Only need to write out "dummy" options for Netscape
if ((navigator.appName == 'Netscape') && (parseInt(navigator.appVersion) <= 4)){
var ret = "";
for (var i=0; i<this.numberOfOptions; i++) {
ret += "<OPTION>";
}
ret += "<OPTION>"
for (var i=0; i<this.longestString.length; i++) {
ret += "_";
}
document.writeln(ret);
}
}
// Populate the list
function DOL_populate() {
var theform = this.form;
var i,j,obj,obj2;
// Get the current value(s) of all select lists this list depends on
this.dependentValues = new Object;
var dependentValuesInitialized = false;
for (i=0; i<this.dependencies.length;i++) {
var sel = theform[this.dependencies[i]];
var selName = sel.name;
// If this is the first dependent list, just fill in the dependentValues
if (!dependentValuesInitialized) {
dependentValuesInitialized = true;
for (j=0; j<sel.options.length; j++) {
if (sel.options[j].selected) {
this.dependentValues[sel.options[j].value] = true;
}
}
}
// Otherwise, add new options for every existing option
else {
var tmpList = new Object();
var newList = new Object();
for (j=0; j<sel.options.length; j++) {
if (sel.options[j].selected) {
tmpList[sel.options[j].value] = true;
}
}
for (obj in this.dependentValues) {
for (obj2 in tmpList) {
newList[obj + this.delimiter + obj2] = true;
}
}
this.dependentValues = newList;
}
}
var targetSel = theform[this.target];
// Store the currently-selected values of the target list to maintain them (in case of multiple select lists)
var targetSelected = new Object();
for (i=0; i<targetSel.options.length; i++) {
if (targetSel.options[i].selected) {
targetSelected[targetSel.options[i].value] = true;
}
}
targetSel.options.length = 0; // Clear all target options
for (i in this.dependentValues) {
if (typeof this.options[i] == "object"
{var o = this.options[i];
for (j=0; j<o.length; j+=2) {
var text = o[j];
var val = o[j+1];
targetSel.options[targetSel.options.length] = new Option(text, val, false, false);
if (typeof this.defaultValues[i] != "undefined" && this.defaultValues[i]!=null) {
for (def in this.defaultValues[i]) {
if (def == val) {
targetSelected[val] = true;
}
}
}
}
}
}
targetSel.selectedIndex=-1;
// Select the options that were selected before
for (i=0; i<targetSel.options.length; i++) {
if (targetSelected[targetSel.options[i].value] != null && targetSelected[targetSel.options[i].value]==true) {
targetSel.options[i].selected = true;
}
}
}
var tees1 = new DynamicOptionList("teecolor", "teestyle"
; tees1.addOptions("Cap Sleeve", "Black & White", "Black & White", "Green & White", "Green & White", "Red & White", "Red & White", "Pink & White", "Pink & White"
; tees1.addOptions("Gym Tee", "Blue", "Blue", "Green", "Green", "Tan", "Tan", "Tangerine", "Tangerine"
;tees1.addOptions("Regular Tee", "Yellow", "Yellow", "Khaki", "Kahki", "Baby Blue", "Baby Blue", "Red", "Red", "Black", "Black", "Grey", "Grey"
;tees1.addOptions("Ringer", "Black & White", "Black & White", "Navy Blue & White", "Navy Blue & White"
;tees1.setDefaultOption("Please Choose Color First", "Please Choose Style Second"
;var tees2 = new DynamicOptionList("teesize", "teestyle"
;tees2.addOptions("Cap Sleeve", "Xs", "Xs", "Sm", "Sm", "Med", "Med", "Lg", "Lg", "XL", "XL"
;tees2.addOptions("Gym Tee", "Xs", "Xs", "Sm", "Sm", "Med", "Med", "Lg", "Lg", "XL", "XL"
;tees2.addOptions("Regular", "Lg", "Lg", "XL", "XL", "XXL", "XXL", "XXXL", "XXXL"
;tees2.addOptions("Ringer", "Xs", "Xs", "Sm", "Sm", "Med", "Med", "Lg", "Lg", "XL", "XL"
;tees2.setDefaultOption("Please Choose Color Third"
;</script>
<form name="" method"">
<font color="#000000">
<select name="teestyle" onchange="tees1.populate(); tees2.populate();">
<option value="Cap Sleeve" selected>Cap Sleeve</option>
<option value="Gym Tee">Gym Tee</option>
<option value="Regular Tee">Regular Tee</option>
<option value="Ringer">Ringer</option>
<script language="JavaScript" type="text/JavaScript">tees1.printOptions(); tees2.printOptions();</script>
</select>
<br>
<select name="teecolor">
</select>
<br>
<select name="teesize">
</select>
</font></form>
NB
#1 Player