<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en">
<title>Dynamic select elements</title>
<style type="text/css">
html, body, form {
padding: 0px;
margin: 0px;
}
body {
margin: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript">
<!--
function loadSelectElement(selObjId, options) {
var selObj = document.getElementById(selObjId);
// clear the target select element apart from the "select your..." option
selObj.options.length = 1;
// copy options from array of [value, pair] arrays to select box
// IE doesn't work if you use the DOM-standard method, however...
if (typeof(window.clientInformation) != 'undefined') {
// IE doesn't take the second "before" parameter...
for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]));
} else {
for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]), null);
}
}
function madeSelection(selObj) {
var selectedValue = selObj.options[selObj.selectedIndex].value;
var selectedText = selObj.options[selObj.selectedIndex].text;
if (selectedValue == '--') return;
if (selObj.name == 'select01') {
document.getElementById('select02Container').style.display = 'block';
document.getElementById('select02').options[0].text = 'Select the breed of your ' + selectedText.toLowerCase();
switch(selectedValue) {
case 'type_cat':
loadSelectElement('select02', [
['breed_persian', 'Persian'],
['breed_tabby', 'Tabby'],
['breed_siamese', 'Siamese']
]);
return;
case 'type_dog':
loadSelectElement('select02', [
['breed_alsatian', 'Alsatian'],
['breed_springer_spaniel', 'Springer Spaniel'],
['breed_king_charles_spaniel', 'King Charles Spaniel'],
['breed_chihuahua', 'Chihuahua'],
['breed_shih_tzu', 'Shih Tzu']
]);
return;
case 'type_bird':
loadSelectElement('select02', [
['breed_parrot', 'Parrot'],
['breed_cock', 'Cock']
]);
return;
case 'type_fish':
loadSelectElement('select02', [
['breed_goldfish', 'Goldfish']
]);
return;
}
} // select01
if (selObj.name == 'select02') {
document.getElementById('select03Container').style.display = 'block';
document.getElementById('select03').options[0].text = 'Select the colour of your ' + selectedText;
switch(selectedValue) {
case 'breed_persian':
case 'breed_siamese':
loadSelectElement('select03', [
['colour_white', 'White'],
['colour_grey', 'Grey'],
['colour_blue', 'Blue']
]);
return;
case 'breed_tabby':
loadSelectElement('select03', [
['colour_tabby', 'Tabby']
]);
return;
case 'breed_alsatian':
case 'breed_springer_spaniel':
case 'breed_king_charles_spaniel':
case 'breed_chihuahua':
case 'breed_shih_tzu':
loadSelectElement('select03', [
['colour_brown', 'Brown'],
['colour_white', 'White'],
['colour_golden', 'Golden']
]);
return;
case 'breed_parrot':
loadSelectElement('select03', [
['colour_white', 'White'],
['colour_yellow', 'Yellow'],
['colour_red_yellow', 'Red & Yellow']
]);
return;
case 'breed_cock':
loadSelectElement('select03', [
['colour_white', 'White'],
['colour_brown', 'Brown']
]);
return;
case 'breed_goldfish':
loadSelectElement('select03', [
['colour_orange', 'Orange']
]);
return;
}
} // select02
}
//-->
</script>
</head>
<body>
<form name="myForm">
<select name="select01" id="select01" onchange="madeSelection(this);">
<option value="--">Select your pet type</option>
<option value="type_cat">Cat</option>
<option value="type_dog">Dog</option>
<option value="type_bird">Bird</option>
<option value="type_fish">Fish</option>
</select>
<div id="select02Container" style="margin-top:1em; display:none;">
<select name="select02" id="select02" onchange="madeSelection(this);">
<option value="--">Select your pet breed</option>
</select>
</div>
<div id="select03Container" style="margin-top:1em; display:none;">
<select name="select03" id="select03" onchange="madeSelection(this);">
<option value="--">Select your pet colour</option>
</select>
</div>
</form>
</body>
</html>
