Forum Moderators: open
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[3] = "Truck";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Train";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Car";
arrItemsGrp1[5] = 1;
arrItems1[6] = "Boat";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Submarine";
arrItemsGrp1[7] = 2;
arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultralight";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Glider";
arrItemsGrp1[2] = 3;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[21] = "747";
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0
arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1
arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2
arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5
arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3
arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4
arrItems2[105] = "Oil Tanker";
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat";
arrItemsGrp2[106] = 6
arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7
var arrItems3 = new Array();
var arrItemsGrp3 = new Array();
arrItems3[3] = "Truck";
arrItemsGrp3[3] = 1;
arrItems3[4] = "Train";
arrItemsGrp3[4] = 1;
arrItems3[5] = "Car";
arrItemsGrp3[5] = 1;
arrItems3[6] = "Boat";
arrItemsGrp3[6] = 2;
arrItems3[7] = "Submarine";
arrItemsGrp3[7] = 2;
arrItems3[0] = "Planes";
arrItemsGrp3[0] = 3;
arrItems3[1] = "Ultralight";
arrItemsGrp3[1] = 3;
arrItems3[2] = "Glider";
arrItemsGrp3[2] = 3;
var arrItems4 = new Array();
var arrItemsGrp4 = new Array();
arrItems4[21] = "747";
arrItemsGrp4[21] = 0
arrItems4[22] = "Cessna";
arrItemsGrp4[22] = 0
arrItems4[31] = "Kolb Flyer";
arrItemsGrp4[31] = 1
arrItems4[34] = "Kitfox";
arrItemsGrp4[34] = 1
arrItems4[35] = "Schwietzer Glider";
arrItemsGrp4[35] = 2
arrItems4[99] = "Chevy Malibu";
arrItemsGrp4[99] = 5
arrItems4[100] = "Lincoln LS";
arrItemsGrp4[100] = 5
arrItems4[57] = "BMW Z3";
arrItemsGrp4[57] = 5
arrItems4[101] = "F-150";
arrItemsGrp4[101] = 3
arrItems4[102] = "Tahoe";
arrItemsGrp4[102] = 3
arrItems4[103] = "Freight Train";
arrItemsGrp4[103] = 4
arrItems4[104] = "Passenger Train";
arrItemsGrp4[104] = 4
arrItems4[105] = "Oil Tanker";
arrItemsGrp4[105] = 6
arrItems4[106] = "Fishing Boat";
arrItemsGrp4[106] = 6
arrItems4[200] = "Los Angelas Class";
arrItemsGrp4[200] = 7
arrItems4[201] = "Kilo Class";
arrItemsGrp4[201] = 7
arrItems4[203] = "Seawolf Class";
arrItemsGrp4[203] = 7
function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
controlToPopulate.add(myEle) ;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>
</HEAD>
<BODY>
<form name=myChoices>
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<option value=0 SELECTED>[SELECT]</option>
<option value=1>Land</option>
<option value=2>Sea</option>
<option value=3>Air</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems3, arrItemsGrp3);">
<option value=0 SELECTED>[SELECT]</option>
<option value=1>Land</option>
<option value=2>Sea</option>
<option value=3>Air</option>
</SELECT><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems4, arrItemsGrp4);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
<td>
</TD>
</TR>
</TABLE>
</form>
It looks like the first time you iterate through that for loop, you're requesting a reference to an element that doesn't exist - myChoices.thirdChoice.options[myChoices.thirdChoice.options.length]. Arrays have items at numbers 0 though length - 1, so in your first iteration the index is one too great.
<added> Ooops, scratch that. Looking again, you're not working with a property of the nonexistant element, so that wouldn't be throwing your error. But you should still start your iteration with a real element. </added>
However.. If you only get the error on the second for loop, but the one above works without incident, that kind of blows my theory out of the water. Since both loops start one index too high, you'd expect to see the error in both cases. Maybe you need to be referring to document.myChoices?
Hope you figure it out..
g.
Atleast thats what I think your problem is :).
While your at it all attributes are supposed to be quoted, try validating your code and it might prevent some frustrations.
However all the ID`s are in the script... it should be able to find it.
Not really sure what you mean by that but I noticed another problem. You cant have two elements with the same ID. ID's are unique and currently you have 2 of each. Try validating your html before you worry about the javascript.
case closed
