This is definitely something that requires Javascript. Here's a self-contained example to get you started. If you need to generate the values in the select boxes dynamically you could either dynamically generate the "osMap" data structure in your CGI, or better yet write a web service that returns just that structure as
JSON via a XMLHttpRequest. If you need to do a lot of work like this, I highly recommend investing some time in learning a javascript toolkit like
Dojo.
<html>
<body>
Operating System:
<select id="os" onchange="changeOS">
<option>--Choose OS--</option>
</select><br/>
Flavor:<select id="variant"></select>
<script>
var osMap = {
"Windows":["95","98","NT","ME","2000","XP","Vista"],
"Mac":["OS9","OSX(PPC)","OSX(x86)"],
"Linux":["RedHat","Ubuntu","Debian","Slackware"]
};
var osselect = document.getElementById('os');
var i=1;
for (os in osMap){
osselect.options[i++] = new Option(os)
}
osselect.onchange = function(){
var variant = document.getElementById('variant');
var flavors = osMap[this.options[this.selectedIndex].value];
variant.length = 0;
if(flavors){
for(i = 0; i<flavors.length;i++){
variant.options[i] = new Option(flavors[i]);
}
}
}
</script>
</body>
</html>
