dynamic dropdown / select -- cross browser compat
Hi All,
I've been tweaking this for a few days. & i can't seem to get it working correctly in IE, however it works well in Opera & Mozilla + Netscape. O guru, help me see the light. Javascript isn't as straightfwd as other OOPL's
the outline is this
|Make |--- |Model|---| Year |
-- Change of make rewrites models.
Change of Models re writes Years.
-- Makes are hard coded.
-- Make/Model/Years is in a 3 dimensional array. Each entry unique to make / model combo. the year component is a ":" separated list of all years relevant to that make--model combo.
If the code below is illegible pls see attachment.
----code below----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>somedamnshit.com Accounting</title>
<link rel="stylesheet" type="text/css" href="global.css">
<script language="JavaScript"><!--
var makemodelyrs = new Array(12);
makemodelyrs[0]=new Array(3);makemodelyrs[0][0]='A_and_M';makemodelyrs[0][1]='AnM1';makemodelyrs[0][2]='1999:2000:2003';
makemodelyrs[1]=new Array(3);makemodelyrs[1][0]='ACURA';makemodelyrs[1][1]='NSX';makemodelyrs[1][2]='1979:1990:2009';
makemodelyrs[2]=new Array(3);makemodelyrs[2][0]='ACURA';makemodelyrs[2][1]='Integra';makemodelyrs[2][2]='1979:1990:2009';
makemodelyrs[3]=new Array(3);makemodelyrs[3][0]='EL_DORADO';makemodelyrs[3][1]='GOLDIE';makemodelyrs[3][2]='2005';
makemodelyrs[4]=new Array(3);makemodelyrs[4][0]='ENSENADA';makemodelyrs[4][1]='ENSEN';makemodelyrs[4][2]='1979:1990:2009:2000:2003';
makemodelyrs[5]=new Array(3);makemodelyrs[5][0]='ENSENADA';makemodelyrs[5][1]='ENSEN2';makemodelyrs[5][2]='1979:1990:2009:2000:2003';
makemodelyrs[6]=new Array(3);makemodelyrs[6][0]='RO_ZELIGSON';makemodelyrs[6][1]='RO-ZE';makemodelyrs[6][2]='2009:2000:2007:2000:2003';
makemodelyrs[7]=new Array(3);makemodelyrs[7][0]='ROLCO';makemodelyrs[7][1]='ROL';makemodelyrs[7][2]='2009:2000:2007';
makemodelyrs[8]=new Array(3);makemodelyrs[8][0]='ROLCO';makemodelyrs[8][1]='ROLLA BUS';makemodelyrs[8][2]='2009:2000:2007';
makemodelyrs[9]=new Array(3);makemodelyrs[9][0]='WEST_POINT';makemodelyrs[9][1]='WEST_PO';makemodelyrs[9][2]='2000:2007:2000:2003';
makemodelyrs[10]=new Array(3);makemodelyrs[10][0]='WESTWARD_WIL';makemodelyrs[10][1]='WESTW';makemodelyrs[10][2]='1979:1990:2009';
makemodelyrs[11]=new Array(3);makemodelyrs[11][0]='WESTWARD_WIL';makemodelyrs[11][1]='WESTW TWO';makemodelyrs[11][2]='1979:1990:2009';
function domodels (inForm,make){
var j = 1;
var opttxt = "";
var optval = "";
var defsel = true;
var sel = true;
// Reset lists to zero.
inForm.model.options.length = 0;
inForm.years.options.length = 0;
for (var i=0;i < 12;i++){
if(make == makemodelyrs[i][0]){
opttxt = makemodelyrs[i][1];
optval = makemodelyrs[i][1];
defsel = "false";
sel = "false";
inForm.model.options[j] = new Option (opttxt,optval,defsel,sel);
inForm.model.options[j].selectedIndex = j;
j++;
}
}
inForm.model.options[0].text = "- Model -";
inForm.years.options[0].text = "- Year -";
inForm.model.options[0].defaultSelected = true;
inForm.years.options[0].selected = true;
window.history.go(0);
}
function doyears (inForm,model){
var opttxt = "";
var optval = "";
var defsel = "";
var sel = "";
var yrs = new Array();
// Reset lists to zero.
inForm.years.options.length = 0;
for (var i=0;i < 12;i++){
if (model == makemodelyrs[i][1]){
/** split years...& populate options list **/
yrs = makemodelyrs[i][2].split(':');
for (var j=1;j < yrs.length + 1;j++){
opttxt = yrs[j - 1];
optval = yrs[j - 1];
defsel = "false";
sel = "false";
inForm.years.options[j]= new Option (opttxt,optval,defsel,sel);
inForm.years.options[j].selectedIndex = j;
}
/** save resources by exiting on first match **/
inForm.years.options[0].text = "- Year -";
inForm.years.options[0].value = "";
inForm.years.options[0].defaultSelected = true;
inForm.years.options[0].selected = true;
window.history.go(0);
return true;
}
}
}
//--></script>
</head>
<body>
<center>
<form name="car">
<select name="make" onChange="domodels(document.car,document.car.make.options[document.car.make.selectedIndex].value);">
<option value='make'> - Make - </option>
<option value='ACURA'> ACURA </option>
<option value='A_and_M'> A_and_M </option>
<option value='EL_DORADO'> EL_DORADO </option>
<option value='ENSENADA'> ENSENADA </option>
<option value='RO_ZELIGSON'> RO-ZELIGSON </option>
<option value='ROLCO'> ROLCO </option>
<option value='WESTWARD_WIL'> WESTWARD-WIL </option>
<option value='WEST_POINT'> WEST_POINT </option>
</select>
<select name="model" onChange="doyears(document.car,document.car.model.options[document.car.model.selectedIndex].value);">
<option value='model'> - Model - </option>
</select>
<select name="years">
<option value='year'> - Year - </option>
</select>
<p>
</form>
</center>
<p><center>
<font face="arial, helvetica" size="-2">test drops<br>
<a href="http://somedamnshit.com">somedamnshit.com</a></font>
</center><p>
</body>
</html>
