Large arrays

JavaScript
1

I have a large list of data which I am still not sure how to place into my code. I have a simple page with three select boxes and a div to display text once all three are filled.

The information in the second select box is dependent on the first, the third to the second, and the div to the third.

Example:

First box options: (There are only two options, so they are hard coded in)
Remote1, Remote2

Second box options: (dependent on the first selection)
If Remote1 was selected:
TV, DVD
If Remote2:
VCR, DVD

Third box options (dependent on both above selections)
If Remote1/TV:
Sony, Sanyo
If Remote2/DVD:
Panasonic, Daewoo

Then the div will display codes dependent upon all three selections.
I know I can do this with if statements and way too many lines of code, but I know there must be a better way.

Thanks in advance for your help,
Shane

2

It sounds like a database may be wanted to store such a large amount of data about each item.

Perhaps the best way is to use Ajax techniques to submit the partial form data to a server-side page, which can use that data to query the database for potential items and send that list back to the web page.

3

Here is a way to do it using three select boxes and two js data arrays. It works in all browsers. When you click on the last option list an alert() tells you what you have selected in each box. You can use these sources to meet your own needs.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Select Products</title>
<script type=“text/javascript”>
<!–
// initialise shortcuts on page load
var selectObj1=null, selectObj2=null, selectObj3=null; // global
function init()
{ selectObj1=document.getElementById(“select_1”);
selectObj2=document.getElementById(“select_2”);
selectObj2.disabled=true;
//
selectObj3=document.getElementById(“select_3”);
selectObj3.disabled=true;
}
// ========== end init() ==============
// second select box options list
var A= new Array()
A[“remote_1”]=[“Select here …”,“TV-1”,“DVD-1”];
A[“remote_2”]=[“Select here …”,“VCR-1”,“DVD-2”];
//
// third select box options list
var B= new Array()
B[“TV-1”]=[“Select here …”,“Sony”,“Sanyo”];
B[“DVD-1”]=[“Select here …”,“Honda”,“Ford”, “GMH”];
B[“VCR-1”]=[“Select here …”,“Red”,“Green”,“Blue”];
B[“DVD-2”]=[“Select here …”,“Panasonic”,“Daewoo”];
//
// global variables
var saveObj=null, indx=null, targetObj=null, selectNo=null;
//
function process(obj,sNumb)
{ // disable unused select boxes
if(sNumb==2)
{ selectObj2.selectedIndex=“0”;
selectObj2.disabled=true;
selectObj3.selectedIndex=“0”;
selectObj3.disabled=true;
}
else if( sNumb==3)
{ selectObj3.selectedIndex=“0”;
selectObj3.disabled=true;
}
//
// store selected index
indx=obj.options.selectedIndex;
// invalid selection
if(indx==0){ return; }
// ---------
// save passed parameters for use after timeout deleay
saveObj=obj, selectNo=sNumb;
// put object items list into next select box after clearing
targetObj=document.getElementById(“select_”+selectNo)
targetObj.disabled=false;
// clear any existing options note that this starts from end of list, not beginning
for(var i=targetObj.options.length-1;i>-1;i–)
{ targetObj.options[i]=null; }
// build in short delay here to avoid error in Opera browser
setTimeout(“finishOff()”,50)
}
// ----------- 50ms delay here --------
// called from timeout in function process()
function finishOff()
{ var obj=saveObj; // from global
// fill selectObj options
var i, thisItem=0;
// build options list
var targArray=(selectNo==2)?A[obj.options[indx].value] : B[obj.options[indx].value];
for(i=0;i<targArray.length;i++)
{ thisItem=targArray[i];
// syntax is new Option(“text”, “value”, isDefaultSelectedFlag, isSelectedFlag)

       targetObj.options[i]=new Option(thisItem,thisItem,false,false);    
     } 
 obj.blur();

}
// ============ end process() ===================
// fires on selecting in third select box
function finish()
{ alert(“You have selected [”+selectObj1.value+“] [”+selectObj2.value+“] [”+selectObj3.value+“]”)
}
// ------------
//
window.onload=init;
//–>
</script>
<style type=“text/css”>
<!–
#S1 { position:absolute; top:50px; left:10px; width:100px; text-align:left; }
#S2 { position:absolute; top:50px; left:150px; width:100px; text-align:left; }
#S3 { position:absolute; top:50px; left:300px; width:100px; text-align:left; }
select { width:120px; }
–>
</style>
</head>

<body>

<div id=“S1”>
<select id=“select_1” onchange=“process(this,2)”>
<option value=“0”>Select here …</option>
<option value=“remote_1”>Remote 1</option>
<option value=“remote_2”>Remote 2</option>
</select>
</div>
<!-- end S1 –>
<div id=“S2”>
<select id=“select_2” onchange=“process(this,3)”>
<option value=“0”>Select here …</option>
</select></div>
<!- end S2>
<div id=“S3”>
<select id=“select_3” onchange=“finish()”>
<option value=“0”>Select here …</option>
</select></div>
<!-- end S3 –>

</body>

</html>