Browsers will go into quirks mode when encountering markup errors, they try to correct your errors which can from my understanding result in slower pages and pages that do not render quite right.
Again from my understanding it is best to use a strict doc type and validate your code, the strict doc type tells the browser your doc contains no errors and to render it exactly as you have written.
On your cascading selects, that is actually more simple than you might think, I have them implemented 3-deep in my current app.
Here is an example of 2-deep cascading selects for country and city.
When you change the value of country, the "onChange" calls the function to rebuild the city menu, sending it's value for the function to use.
You will of course need to have all the arrays filled, you should be able to use the previous examples to fill in global variables for countries and cities.
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
<!--
var cities = new Array();
cities["country1"]="c1city1,c1city2,c1city3";
cities["country2"]="c2city1,c2city2,c2city3";
cities["country3"]="c3city1,c3city2,c3city3";
function build_city_menu(country)
{
var cs = document.getElementById("city_menu");
// remove all options from it
while ( cs.options.length )
{
cs.remove(cs.options[0]);
}
var cty = cities[country].split(",");
for ( var i = 0; i < cty.length; i++ )
{
// create new option element
var newOpt=document.createElement('option');
newOpt.text=cty[i];
// try adding the option to the select object
try
{
cs.add(newOpt,null); // standards compliant
}
catch(ex)
{
cs.add(newOpt); // IE only
}
// set the value to same as the text
cs.options[i].value = cty[i];
}
// set selected index
cs.selectedIndex = 0;
}
-->
</script>
</head>
<body onLoad="build_city_menu('country1')">
<select id="country_menu" onchange="build_city_menu(this.value)">
<option value="country1" selected="selected">country 1</option>
<option value="country2">country 2</option>
<option value="country3">country 3</option>
</select>
<select id="city_menu">
<option></option>
</select>
</body>
</html>
You might use one global variable for the cities menu, and add an ajax call from the build_city_menu
function requesting the cities from your database for the country name passed to the function, have the returned result a comma delimited string place right into a global city_list and replace cities[] with that.
That would save you having to fill city lists for every country.
