Javascript SELECT populate function returning undefined elements #2

Returns infinate undefined elements - Full script

[PSWorx]

Ok the script below allows me to do the following:

Populate a second and third options lists according to value of the previous selected index.

Script:
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function init()
{
optionTest = true;
//If options list no larger than 1 then do this
if(document.forms['filters'].second.options.length <= 1){
lgth = document.forms['filters'].second.options.length - 1;
document.forms['filters'].second.options[lgth] = null;
if (document.forms['filters'].second.options[lgth]){
optionTest = false;
}else{
document.forms['filters'].second.options[0] = new Option('Choose a Category','');
}
}
}

function initTwo()
{
optionTest = true;
//If options list no larger than 1 then do this
if(document.forms['filters'].third.options.length <= 1){
lgth = document.forms['filters'].third.options.length - 1;
document.forms['filters'].third.options[lgth] = null;
if (document.forms['filters'].third.options[lgth]){
optionTest = false;
}else{
document.forms['filters'].third.options[0] = new Option('Choose a Category','');
}
}
}

function populate()
{
if (!optionTest) return;
var box = document.forms['filters'].first;
var number = box.options[box.selectedIndex].value;
if (!number ¦¦ number==0) return;
var list = store[number];
var box2 = document.forms['filters'].second;
box2.options.length = 0;
for(i=0;i<list.length;i+=2)
{
box2.options[i/2] = new Option(list[i],list[i+1]);
}
document.forms['filters'].third.options[0] = new Option('Choose a Subcategory','');
}

function populateTwo()
{
if (!optionTest) return;
var box2 = document.forms['filters'].second;
var number = box2.options[box2.selectedIndex].value;
if (!number) return;
var list = store[number];
var box3 = document.forms['filters'].third;
box3.options.length = 0;
for(i=0;i<list.length;i+=2)
{
box3.options[i/2] = new Option(list[i],list[i+1]);
}
}

function clearSelect()
{
var box2 = document.forms['filters'].second;
while (box2.options.length > 0) {
box2.options[0] = null;
}
document.forms['filters'].second.options[0] = new Option('Choose a Category','');
}

function clearSelectTwo()
{
var box3 = document.forms['filters'].third;
while (box3.options.length > 0) {
box3.options[0] = null;
}
document.forms['filters'].third.options[0] = new Option('Choose a Category','');
}

function clearSelectThree()
{
var box3 = document.forms['filters'].third;
while (box3.options.length > 0) {
box3.options[0] = null;
}
document.forms['filters'].third.options[0] = new Option('Choose a Subcategory','');
}

/*The following functions are to populate the final (fourth) select box for products*/

function initP()
{
optionTest = true;
//If options list no larger than 1 then do this
if(document.forms['filters'].fourth.options.length <= 1){
lgth = document.forms['filters'].fourth.options.length - 1;
document.forms['filters'].fourth.options[lgth] = null;
if (document.forms['filters'].fourth.options[lgth]){
optionTest = false;
}else{
document.forms['filters'].fourth.options[0] = new Option('Choose a Section b','');
}
}
}

function populatePa()
{
if (!optionTest) return;
var prodid = document.forms['filters'].first;
var prodnumber = prodid.options[prodid.selectedIndex].value;
if (!prodnumber ¦¦ prodnumber==0) return;
var prodlist = storeP[prodnumber];
var prodbox = document.forms['filters'].fourth;
prodbox.options.length = 0;
for(i=0;prodlist.length;i+=2)
{
prodbox.options[i/2] = new Option(prodlist[i],prodlist[i+1]);
}
}

function populatePb()
{
if (!optionTest) return;
var box = document.forms['filters'].second;
var number = box.options[box.selectedIndex].value;
if (!number ¦¦ number==0) return;
var list = storeP[number];
var boxP = document.forms['filters'].fourth;
boxP.options.length = 0;
for(i=0;list.length;i+=2)
{
boxP.options[i/2] = new Option(list[i],list[i+1]);
}
}

function populatePc()
{
if (!optionTest) return;
var box = document.forms['filters'].third;
var number = box.options[box.selectedIndex].value;
if (!number ¦¦ number==0) return;
var list = storeP[number];
var boxP = document.forms['filters'].fourth;
boxP.options.length = 0;
for(i=0;list.length;i+=2)
{
boxP.options[i/2] = new Option(list[i],list[i+1]);
}
}

function clearSelectP()
{
var prodbox = document.forms['filters'].fourth;
while (prodbox.options.length > 0) {
prodbox.options[0] = null;
}
document.forms['filters'].fourth.options[0] = new Option('Choose a Category','');
}

/*The following arrays are used by the js to populate the select section/category lists*/

var store = new Array();
store['7'] = new Array(
'-- Subcategory -- ','',
'Xbox »','16',
'Xbox 360 »','14');
store['21369'] = new Array(
'No Subcategories available','');
store['3'] = new Array(
'-- Subcategory -- ','',
'Laptop Peripherals','10',
'Laptops','8',
'PC Peripherals','11',
'PCs »','9');
store['4'] = new Array(
'No Subcategories available','');

store['16'] = new Array(
'-- Subfilter -- ','',
'Xbox Games','17');

store['14'] = new Array(
'-- Subfilter -- ','',
'Xbox 360 Games','15');
store['10'] = new Array(
'No Subfilters available','');
store['8'] = new Array(
'No Subfilters available','');
store['11'] = new Array(
'No Subfilters available','');

store['9'] = new Array(
'-- Subfilter -- ','',
'Complete PC\'s','12');

/*The following arrays are to populate the fourth (products) select list*/

var storeP = new Array();
storeP['7'] = new Array(
'No Products available','');
storeP['16'] = new Array(
'No Products available','');
storeP['14'] = new Array(
'No Products available','');

storeP['21369'] = new Array(
'-- Products -- ','',
'Hyundai ImageQuest 32&quot; LCD Screen','1');
storeP['3'] = new Array(
'No Products available','');
storeP['10'] = new Array(
'No Products available','');

storeP['8'] = new Array(
'-- Products -- ','',
'Dell Latitude C610 Laptop','3',
'HP Omnibook 6000 Laptop','7',
'Packard Bell Easynote R1 000 Laptop','6',
'Packard Bell Easynote W1 801 Laptop','5');
storeP['11'] = new Array(
'No Products available','');
storeP['9'] = new Array(
'No Products available','');
storeP['4'] = new Array(
'No Products available','');

/*]]>*/
</script>

Array (for use with script):

HTML:
<body onLoad="init();initTwo();initP()">

<form method="post" action="" name="filters">
Select section here:&nbsp;
<select name="first" id="first" onchange="clearSelect();clearSelectTwo();clearSelectP();populate();populatePa();" size="1">
<option value="0">-- Category --</option>
<option value="7">Consoles &amp; Games&nbsp;&nbsp;»</option>
<option value="21369">new cat edit</option>
<option value="3">PCs, Laptops and Hardware&nbsp;&nbsp;»</option>
<option value="4">Quad and Dirt Bikes</option>
</select>

&nbsp;»&nbsp;<b>(optional)</b>&nbsp;»&nbsp;

<select name="second" size="1" onchange="clearSelectThree();clearSelectP();populateTwo();populatePb();">
<option value="">Choose a Category</option>
[JS SCRIPT POPULATES HERE]
</select>

&nbsp;»&nbsp;<b>(optional)</b>&nbsp;»&nbsp;

<select name="third" size="1" onchange="clearSelectP();populatePc();">
<option value="">Choose a Category</option>
[JS SCRIPT POPULATES HERE]
</select>

&nbsp;<input name="editSection" value="EDIT" onclick="return verifysubmit();" style="vertical-align: middle;" type="submit">

Select product here:&nbsp;

<select name="fourth">
<option value="0">Choose a Section</option>
[JS SCRIPT POPULATES HERE]
</select>
</form>
</body>

Info:

Remove populatePa(),populatePb() and populatePc() from the onchange event handler in the first, second and third select lists, after that you should notice that when changing the first list, the second one is updated, when changing the second, the third is updated. This is done using the populate() and populateTwo() functions, i have re used the function and named these populatePa(), populatePb() and populatePc() to populate the fourth (products) select list, notice that when populatePa(),populatePb() and populatePc() are in place, the script will hang/lockup in IE, firefox warns about the script hanging and lets u stop it and any other browsers im not sure of just yet.

Can anyone figure out whats going wrong, the populateP#() functions are no different to the populate() and populateTwo() functions there just setup to work with the fourth select list.

Note: When using firefox, even tho the script hangs, when prompted to stop it, you will or should see that the products list is updated with the correct js array data however an infinate number of undefined select options are injected into the list, cant figure out why it is happening.

Also:

Please note that even tho i am using 's with the array numbers i.e. store['566554']= This does not cause any issues with the other two section/category lists (as stated ive reused the function and adapted it for the fourth select list).

Pay attention to this part here in the populate functions:

for(i=0;prodlist.length;i+=2){
prodbox.options[i/2] = new Option(prodlist[i],prodlist[i+1]);
}

Baring in mind im not a js boffin and the origonal script im using someone else wrote, this portion is so "i+=2" select option will use two elements from the array being the element name and associated value, had to mention this just incase someone identified this as the error, note on the line insude the for loop:

prodbox.options[i/2] = new Option(prodlist[i],prodlist[i+1]);

When creating the option two elements from the array are used hence then increase of 2 in the itterations of the loop.

!Be sure to change the pipes ¦¦ back to normal if copying from this post otherwise nothing will work!

Any help will be much appreciated.

TIA

[PSWorx]

Never mind, i'm an idiot

[adni18]

Erm... okay?

Edit: Mind explaining what was wrong, for future readers who might have the same problem?

[PSWorx]

Made an error on the second operator of the for loop:

list.length

which should be

i<list.length

My text editor selected the lot "i<list.length" when i changed the name of the list var origonally.