Code:
<html>
<head>
<title>test</title>
<script language="JavaScript">
var manufacturers = new Array ();
manufacturers[1] = 'Manufacturer 1';
manufacturers[2] = 'Manufacturer 2';
manufacturers[3] = 'Manufacturer 3';
var models = new Array();
models[1] = new Array();
models[1][1] = "Model 11";
models[1][2] = "Model 12";
models[1][3] = "Model 13";
models[2] = new Array();
models[2][4] = "Model 21";
models[2][5] = "Model 22";
models[2][6] = "Model 23";
models[2][7] = "Model 24";
models[3] = new Array();
models[3][8] = "Model 31";
models[3][9] = "Model 32";
function set_model() {
var select_manufacturer = document.f.manufacturer;
var select_model = document.f.model;
var selected_model = select_manufacturer.value;
if(!selected_model) {
select_model.options.length=0;
select_model.options[select_model.options.length] = new Option('-----');
return;
}
select_model.options.length=0;
ext_models = models[selected_model];
for(key in ext_models) {
select_model.options[select_model.options.length] = new Option(ext_models[key], key);
}
}
function set_manufacturers() {
var select_manufacturer = document.f.manufacturer;
for(key in manufacturers) {
select_manufacturer.options[select_manufacturer.length] = new Option(manufacturers[key], key);
}
}
onload = set_manufacturers;
</script>
</head>
<body>
<form name="f">
<fieldset>
<legend>Test:</legend>
<div>
<label for="manufacturer">Manufacturer:</label>
<select name="manufacturer" id="manufacturer" onChange="set_model()">
<option>-select manuf.-</option>
</select>
</div>
<div>
<label for="model">Model:</label>
<select name="model" id="model">
<option>-----</option>
</select>
</div>
</fieldset>
</form>
</body>
</html>