Here is the code, hopefully it makes sense. The first piece here is from the <head> section in a Coldfusion page:
<script language='JavaScript'>
var arrFormat = new Array();
var arrProduct = new Array();
var arrSubstrate = new Array();
<cfset Variables.JSLoop = 0>
<cfoutput>
<cfloop query='qryFormat'>
arrFormat[#Variables.JSLoop#] = new Array('#qryFormat.pk_reference_id#', '#qryFormat.Reference_main#');
<cfset Variables.JSLoop = Variables.JSLoop + 1>
</cfloop>
</cfoutput>
<cfset Variables.JSLoop = 0>
<cfoutput>
<cfloop query='qryProduct'>
arrProduct[#Variables.JSLoop#] = new Array('#qryProduct.pk_reference_id#', '#qryProduct.Reference_main#', '#qryProduct.fk_cat_reference_id#', '#qryProduct.reference_desc_1#', '#qryProduct.reference_desc_2#', '#qryProduct.reference_desc_3#', '#qryProduct.reference_desc_4#', '#qryProduct.reference_desc_5#', '#qryProduct.reference_desc_6#', '#qryProduct.reference_desc_7#', '#qryProduct.reference_desc_8#');
<cfset Variables.JSLoop = Variables.JSLoop + 1>
</cfloop>
</cfoutput>
<cfset Variables.JSLoop = 0>
<cfoutput>
<cfloop query='qrySubstrate'>
arrSubstrate[#Variables.JSLoop#] = new Array('#qrySubstrate.pk_reference_id#', '#qrySubstrate.Reference_main#', '#qrySubstrate.fk_cat_reference_id#', '#qrySubstrate.reference_desc_1#', '#qrySubstrate.reference_desc_2#', '#qrySubstrate.reference_desc_3#', '#qrySubstrate.reference_desc_4#', '#qrySubstrate.reference_desc_5#', '#qrySubstrate.reference_desc_6#', '#qrySubstrate.reference_desc_7#', '#qrySubstrate.reference_desc_8#');
<cfset Variables.JSLoop = Variables.JSLoop + 1>
</cfloop>
</cfoutput>
</script>
The arrays above are being populated from Coldfusion queries. This code works 100% in all browsers as it is all run at the server.
Here is the function that I referred to in my initial post. It runs through great when the initial radio button (called format) is clicked therefore launching this function:
function alterProdList(ProdList) {
var i; var chkCty = ''; var intFormat;
document.getElementById('vectorimage').style.display = "none";
if (ProdList == 1)
{
document.getElementById('div_product').style.display = "block";
if (document.orderitems.format[0].checked) {
intFormat = 25;
document.getElementById('SpecialFinishing').style.display = "block";
}
else if (document.orderitems.format[1].checked)
{
intFormat = 26;
document.getElementById('SpecialFinishing').style.display = "none";
}
else if (document.orderitems.format[2].checked)
{
intFormat = 27;
document.getElementById('SpecialFinishing').style.display = "none";
}
document.orderitems.product.options.length=0;
for (i = 0; i < arrProduct.length; i++)
{
if ((arrProduct[i][2] == intFormat) && (chkCty.lastIndexOf(arrProduct[i][0] == -1)))
{
document.orderitems.product.options[document.orderitems.product.length] = new Option(arrProduct[i][1], arrProduct[i][0]);
chkCty = chkCty + ',' + arrProduct[i][0];
}
}
alterProdList(2);
}
else if (ProdList == 2)
{
var intCnt = 0;
var intProdSize = 0;
var intProdDesc = 0;
var intProdBImage = 0;
var intProdVImage = 0;
for (i = 0; i < arrSubstrate.length; i++)
{
if ((arrSubstrate[i][2] == document.orderitems.product.options[document.orderitems.product.selectedIndex].value) && (chkCty.lastIndexOf(arrSubstrate[i][0] == -1)))
{
if (intCnt == 0)
{
document.getElementById('div_substrate').style.display = "block";
document.orderitems.substrate.options.length = 0;
intCnt = 1;
}
document.orderitems.substrate.options[document.orderitems.substrate.length] = new Option(arrSubstrate[i][1], arrSubstrate[i][0]);
chkCty = chkCty + ',' + arrSubstrate[i][0];
}
}
document.getElementById('div_stickers').style.display = "none";
if (intCnt == 0)
{
if (document.orderitems.product.options[document.orderitems.product.selectedIndex].value == '57')
{
document.getElementById('div_stickers').style.display = "block";
document.orderitems.substrate.options.length = 0;
document.getElementById('div_substrate').style.display = "none";
document.getElementById('backimage').style.display = "none";
}
else
{
document.orderitems.substrate.options.length = 0;
document.getElementById('div_substrate').style.display = "none";
document.getElementById('div_stickers').style.display = "none";
}
}
for (i = 0; i < arrProduct.length; i++)
{
if ((arrProduct[i][0] == document.orderitems.product.options[document.orderitems.product.selectedIndex].value) && (chkCty.lastIndexOf(arrProduct[i][0] == -1)))
{
if (arrProduct[i][3] != '')
{
document.getElementById('swide').value = arrProduct[i][3];
if (arrProduct[i][6] == '2')
{
document.getElementById('swide').style.display = 'block';
document.getElementById('lswide').style.display = 'block';
document.getElementById('swide').disabled=true;
}
else if (arrProduct[i][6] == '1')
{
document.getElementById('swide').style.display = 'block';
document.getElementById('lswide').style.display = 'block';
document.getElementById('swide').disabled=false;
}
else if (arrProduct[i][6] == '0')
{
document.getElementById('swide').style.display = 'none';
document.getElementById('lswide').style.display = 'none';
}
else
{
document.getElementById('swide').style.display = 'block';
document.getElementById('lswide').style.display = 'block';
document.getElementById('swide').disabled=false;
}
intProdSize = 1;
}
else
{
document.getElementById('swide').value = '';
if (arrProduct[i][6] == '2')
{
document.getElementById('swide').style.display = 'block';
document.getElementById('lswide').style.display = 'block';
document.getElementById('swide').disabled=true;
}
else if (arrProduct[i][6] == '1')
{
document.getElementById('swide').style.display = 'block';
document.getElementById('lswide').style.display = 'block';
document.getElementById('swide').disabled=false;
}
else if (arrProduct[i][6] == '0')
{
document.getElementById('swide').style.display = 'none';
document.getElementById('lswide').style.display = 'none';
}
else
{
document.getElementById('swide').style.display = 'block';
document.getElementById('lswide').style.display = 'block';
document.getElementById('swide').disabled=false;
}
}
if (arrProduct[i][4] != '')
{
document.getElementById('stall').value = arrProduct[i][4];
if (arrProduct[i][6] == '2')
{
document.getElementById('stall').style.display = 'block';
document.getElementById('lstall').style.display = 'block';
document.getElementById('stall').disabled=true;
}
else if (arrProduct[i][6] == '1')
{
document.getElementById('stall').style.display = 'block';
document.getElementById('lstall').style.display = 'block';
document.getElementById('stall').disabled=false;
}
else if (arrProduct[i][6] == '0')
{
document.getElementById('stall').style.display = 'none';
document.getElementById('lstall').style.display = 'none';
}
else
{
document.getElementById('stall').style.display = 'block';
document.getElementById('lstall').style.display = 'block';
document.getElementById('stall').disabled=false;
}
intProdSize = 1;
}
else
{
document.getElementById('stall').value = '';
if (arrProduct[i][6] == '2')
{
document.getElementById('stall').style.display = 'block';
document.getElementById('lstall').style.display = 'block';
document.getElementById('stall').disabled=true;
}
else if (arrProduct[i][6] == '1')
{
document.getElementById('stall').style.display = 'block';
document.getElementById('lstall').style.display = 'block';
document.getElementById('stall').disabled=false;
}
else if (arrProduct[i][6] == '0')
{
document.getElementById('stall').style.display = 'none';
document.getElementById('lstall').style.display = 'none';
}
else
{
document.getElementById('stall').style.display = 'block';
document.getElementById('lstall').style.display = 'block';
document.getElementById('stall').disabled=false;
}
}
if (arrProduct[i][7] != '')
{
document.getElementById("proddesc").innerHTML = '<b><u>' + arrProduct[i][1] + '</u></b><br />' + arrProduct[i][7];
document.getElementById("proddesc").style.display = "block";
intProdDesc = 1;
}
else
{
document.getElementById("proddesc").innerHTML = '';
document.getElementById("proddesc").style.display = "none";
}
if (arrProduct[i][8] == '1')
{
document.getElementById("backimage").style.display = "none";
intProdBImage = 1;
}
else
{
document.getElementById("backimage").style.display = "block";
}
if (arrProduct[i][9] != '1')
{
document.getElementById("vectorimage").style.display = "none";
intProdVImage = 1;
}
else
{
document.getElementById("vectorimage").style.display = "block";
}
chkCty = chkCty + ',' + arrProduct[i][0];
}
}
if (intCnt == 1)
{
alterProdList(3);
}
}
else if (ProdList == 3)
{
for (i = 0; i < arrSubstrate.length; i++)
{
if ((arrSubstrate[i][0] == document.orderitems.substrate.options[document.orderitems.substrate.selectedIndex].value) && (chkCty.lastIndexOf(arrSubstrate[i][0] == -1)))
{
if (arrSubstrate[i][3] != '')
{
document.getElementById('swide').value = arrSubstrate[i][3];
if (arrSubstrate[i][6] == '2')
{
document.getElementById('swide').style.display = 'block';
document.getElementById('lswide').style.display = 'block';
document.getElementById('swide').disabled=true;
}
else if (arrSubstrate[i][6] == '1')
{
document.getElementById('swide').style.display = 'block';
document.getElementById('lswide').style.display = 'block';
document.getElementById('swide').disabled=false;
}
else if (arrSubstrate[i][6] == '0')
{
document.getElementById('swide').style.display = 'none';
document.getElementById('lswide').style.display = 'none';
}
else
{
document.getElementById('swide').style.display = 'block';
document.getElementById('lswide').style.display = 'block';
document.getElementById('swide').disabled=false;
}
}
else if (intProdSize == 0)
{
document.getElementById('swide').value = '';
if (arrSubstrate[i][6] == '2')
{
document.getElementById('swide').style.display = 'block';
document.getElementById('lswide').style.display = 'block';
document.getElementById('swide').disabled=true;
}
else if (arrSubstrate[i][6] == '1')
{
document.getElementById('swide').style.display = 'block';
document.getElementById('lswide').style.display = 'block';
document.getElementById('swide').disabled=false;
}
else if (arrSubstrate[i][6] == '0')
{
document.getElementById('swide').style.display = 'none';
document.getElementById('lswide').style.display = 'none';
}
else
{
document.getElementById('swide').style.display = 'block';
document.getElementById('lswide').style.display = 'block';
document.getElementById('swide').disabled=false;
}
}
if (arrSubstrate[i][4] != '')
{
document.getElementById('stall').value = arrSubstrate[i][4];
if (arrSubstrate[i][6] == '2')
{
document.getElementById('stall').style.display = 'block';
document.getElementById('lstall').style.display = 'block';
document.getElementById('stall').disabled=true;
}
else if (arrSubstrate[i][6] == '1')
{
document.getElementById('stall').style.display = 'block';
document.getElementById('lstall').style.display = 'block';
document.getElementById('stall').disabled=false;
}
else if (arrSubstrate[i][6] == '0')
{
document.getElementById('stall').style.display = 'none';
document.getElementById('lstall').style.display = 'none';
}
else
{
document.getElementById('stall').style.display = 'block';
document.getElementById('lstall').style.display = 'block';
document.getElementById('stall').disabled=false;
}
}
else if (intProdSize == 0)
{
document.getElementById('stall').value = '';
if (arrSubstrate[i][6] == '2')
{
document.getElementById('stall').style.display = 'block';
document.getElementById('lstall').style.display = 'block';
document.getElementById('stall').disabled=true;
}
else if (arrSubstrate[i][6] == '1')
{
document.getElementById('stall').style.display = 'block';
document.getElementById('lstall').style.display = 'block';
document.getElementById('stall').disabled=false;
}
else if (arrSubstrate[i][6] == '0')
{
document.getElementById('stall').style.display = 'none';
document.getElementById('lstall').style.display = 'none';
}
else
{
document.getElementById('stall').style.display = 'block';
document.getElementById('lstall').style.display = 'block';
document.getElementById('stall').disabled=false;
}
}
if (arrSubstrate[i][7] != '')
{
document.getElementById("proddesc").innerHTML = '<b><u>' + arrSubstrate[i][1] + '</u></b><br />' + arrSubstrate[i][7];
document.getElementById("proddesc").style.display = "block";
}
else if (intProdDesc == 0)
{
document.getElementById("proddesc").innerHTML = '';
document.getElementById("proddesc").style.display = "none";
}
if (arrSubstrate[i][8] == '1')
{
document.getElementById("backimage").style.display = "none";
}
else if (intProdBImage == 0)
{
document.getElementById("backimage").style.display = "block";
}
if (arrSubstrate[i][9] != '1')
{
document.getElementById("vectorimage").style.display = "none";
}
else if (intProdVImage == 0)
{
document.getElementById("vectorimage").style.display = "block";
}
chkCty = chkCty + ',' + arrSubstrate[i][0];
}
}
}
document.getElementById('startTip').innerHTML = "<a href='javascript:removeProduct();'>X Remove From Order</a>";
document.getElementById('startTip').className = "";
if (testIsValidObject(document.getElementById('overimg')))
{
document.getElementById('overimg').style.width = "0px";
document.getElementById('overimg').style.height = "0px";
document.getElementById('divRestrict').className = "";
}
}
And finally, here is the initial select box as it sits in the HTML:
<select name="product" id="product" class="validate-selection" title="Please select a product." onClick="javascript:alterProdList(2)">
<option value=""></option>
</select>