<tr><td>
	province: <select id="province"><option value="1">Alberta<option value="2">British Columbia<option value="3">Manitoba<option value="4">New Brunswick<option value="5">Newfoundland and Labrador<option value="6">Northwest territories<option value="7">Nova Scotia<option value="8">Nunavut<option value="9" selected>Ontario<option value="10">Prince Edward Island<option value="11">Quebec<option value="12">Saskatchewan<option value="13">Yukon Territory</select>
</td></tr>
<tr><td>
	criteria1: <select id="criteria1"><option value="all_cities">all cities and towns only<option value="all_settlements">all settlements in province<option value="division">   ... by divisions<option value="national_rank">   ... by national rank (by SGC  2006 )<option value="population" selected>   ... by population<option value="types">   ... by type of settlement</select>
</td></tr>
<tr><td>
	criteria1: <select id="criteria2"></select>
</td></tr>
<tr><td>
	<{container} id="header_city">city:</{container}><select id="city"></select>
</td></tr>

document.getElementById("province").onchange = updateProvince;
document.getElementById("criteria1").onchange = updateProvince;
document.getElementById("criteria2").onchange = updateCriteria;

function updateCriteria() {
	request.open("POST", {myURL} + "?action=cities&province=" + document.getElementById("province").value + "&criteria1=" + document.getElementById("criteria1").value + "&criteria2=" + document.getElementById("criteria2").value + "&rand=" + Math.random(), true);
	request.onreadystatechange = function() {
		if (request.readyState ==  4 ) {
			document.getElementById("city").options.length =  0 ;
			var values = eval("(" + request.responseText + ")");
			for (var i in values.cities)
				document.getElementById("city").options.add(new Option(values.cities[i].text, values.cities[i].value));
			document.getElementById("header_city").innerHTML = "city" + (values.cities.length ==  0  ? "" : (" <font style=\"color: #ff0000; font-size: 7pt;\">(" + (values.cities.length -  1 ) + ")</font>")) + ":";
		}
	};
	request.send(null);
}
function updateProvince() {
	request.open("POST", {myURL} + "?action=criteria&province=" + document.getElementById("province").value + "&criteria1=" + document.getElementById("criteria1").value + "&rand=" + Math.random(), true);
	request.onreadystatechange = function() {
		if (request.readyState ==  4 ) {
			document.getElementById("criteria2").options.length =  0 ;
			var values = eval("(" + request.responseText + ")");
			for (var i in values.criterias)
				document.getElementById("criteria2").options.add(new Option(values.criterias[i].text, values.criterias[i].value));
			document.getElementById("criteria2").selectedIndex =  0 ;
			updateCriteria();
		}
	};
	request.send(null);
}
updateProvince();