Multiple Relational TextBoxes

I often have a need to have more than 1 list that relates to another list. Such and a select box for car make and one for car colour, then relate both of them to a list box that has available cars. I made some javascript that will allow infinite number of relations to a single list box. It is object oriented based so theoretically you could create multiple objects and stack the list boxes infinitely deep. Here is the code:-

Code: 
//==================================================== Start of dynamic List Boxes======================================
 
function IAddDimension(Label){
this.DimensionsArray[this.DimensionsArray.length]=Label;
}
 
function IAddValues(){
var args=this.AddValues.arguments
var value=args[0];
//alert(args[1]);
var label=args[1];
var selected=args[2];
var TmpStr="";
for(x=3;x<args.length;x++){
if(this.DimensionsValues[x-3]==null){
this.DimensionsValues[x-3]=Array();
}
this.DimensionsValues[x-3][this.DimensionsValues[x-3].length]=args[x];
TmpStr+="["+args[x]+"]";
eval("if(this.ValsArray"+TmpStr+"==null){this.ValsArray"+TmpStr+"=Array();}");
eval("if(this.LabelsArray"+TmpStr+"==null){this.LabelsArray"+TmpStr+"=Array();}");
eval("if(this.SelectedArray"+TmpStr+"==null){this.SelectedArray"+TmpStr+"=Array();}");
}
 
eval("this.ValsArray"+TmpStr+"[this.ValsArray"+TmpStr+".length]=args[0];");
eval("this.LabelsArray"+TmpStr+"[this.LabelsArray"+TmpStr+".length]=args[1];");
eval("this.SelectedArray"+TmpStr+"[this.SelectedArray"+TmpStr+".length]=args[2];");
//eval("alert(this.LabelsArray"+TmpStr+"[this.LabelsArray"+TmpStr+".length-1])");
}
 
function ISetDimVal(label,value){
var labelnumber=0;
for(z=0;z<this.DimensionsArray.length;z++){
if(this.DimensionsArray[z]==label){
this.CurrentDimensionsValues[z]=value;
}
}
this.SetValues();
}
 
function ISetValues(){
// remove all items from listbox
var Target=document.getElementById(this.TargetListBoxId);
while(Target.length) {Target.remove(0);}
 
var Continue=true;
var DimCountArr=Array();
var DimArr=Array();
var CDimArr=Array();
var FinishedTotal=0;
if(this.CurrentDimensionsValues.length==this.DimensionsArray.length){
while(Continue){
TmpStr="";
CTmpStr="";
Valid=true;
for(B=0;B<this.DimensionsValues.length;B++){
 
if(DimCountArr[B]==null){
DimCountArr[B]=0;
}else{
if(DimCountArr[B]<(this.DimensionsValues[B].length)){
DimCountArr[B]+=1;
}else{
FinishedTotal++;
Valid=false;
}
}
TmpStr+="["+this.DimensionsValues[B][DimCountArr[B]]+"]";
CTmpStr+=this.DimensionsValues[B][DimCountArr[B]]+"-";
if(this.CurrentDimensionsValues[B]!=this.DimensionsValues[B][DimCountArr[B]]){
Valid=false;
}
}
if(Valid){
if(!js_in_array(CTmpStr, CDimArr)){
DimArr[DimArr.length]=TmpStr;
CDimArr[CDimArr.length]=CTmpStr;
}
}
if(FinishedTotal==this.DimensionsValues.length){
Continue=false;
}
//alert(TmpStr);
}
//alert(DimArr.length);
for(d=0;d<DimArr.length;d++){
EText=Array();
EVals=Array();
ESels=Array();
eval("for(r=0;r<this.LabelsArray"+DimArr[d]+".length;r++){EText[r]=this.LabelsArray"+DimArr[d]+"[r];EVals[r]=this.ValsArray"+DimArr[d]+"[r];ESels[r]=this.SelectedArray"+DimArr[d]+"[r];};");
for(r=0;r<EText.length;r++){
var optn = document.createElement("OPTION");
optn.text = EText[r];
optn.value = EVals[r];
optn.selected = ESels[r];
//alert(EText);
Target.options.add(optn);
}
 
}
}
}
 
function ILoad(){
this.AddDimension("CarMakesID");
this.AddDimension("CarColourID");
 
$SQL="SELECT id,CarName,CarMakesID,CarColourID FROM AvailableCars ORDER BY CarMakesID,CarColourID,CarName";
$r=new ReturnRecord();// mysql_query
$sq2=$r->rawQuery($SQL);
while ($myrow = mysql_fetch_row($sq2)) {
$Tmp=($myrow[0]==$Current['AvailableCarsID'] ? "true" : "false");
// AddValues(TargetValue,TargetText,Selected(true,false),1st DimensionID,2nd DimensionID,3rd DimentionID,etc..)
echo"this.AddValues($myrow[0],'".strip_tags($myrow[1])."',$Tmp,$myrow[2],$myrow[3]);\n";
}
?>
}
 
function ListBoxes(){
// variables
this.DimensionsArray=Array();
this.DimensionsValues=Array();
 
this.CurrentDimensionsValues=Array();
this.ValsArray=Array();
this.LabelsArray=Array();
this.SelectedArray=Array();
// below is where you put the id of the target list box
this.TargetListBoxId="AvailableCarsID";
 
// functions
this.AddDimension=IAddDimension;
this.AddValues=IAddValues;
this.SetDimVal=ISetDimVal;
this.SetValues=ISetValues;
this.Load=ILoad;
}
 
LBoxes=new ListBoxes();
 
//==================================================== End of dynamic List Boxes======================================
 
function StartUp(){ // make this function run on body.onload
LBoxes.Load();
LBoxes.SetDimVal('CarMakesID',document.getElementById('CarMakesID[]').value);
LBoxes.SetDimVal('CarColourID',document.getElementById('CarColourID[]').value);
 
}

and the HTML looks like:-

<select name="CarMakesID[]" id="CarMakesID[]" onChange="LBoxes.SetDimVal('CarMakesID',this.value)">
<?
$CarMakesArray=array();
 
$SQL="SELECT id,Name FROM CarMakes ORDER BY Name";
$sq2=$r->rawQuery($SQL);  // mysql_query
while ($myrow = mysql_fetch_row($sq2)) {
$tmp=($myrow[0]==$Current['CarMakesID'] ? "selected" : "");
echo"<option value='$myrow[0]' $tmp>$myrow[1]</option>";
}
?>
</select>