<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="loadAreas.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="Province" name="Province" class="select" style="width: 100px;">
</select>省(自治区、直辖市)
<select id="City" name="City" class="select">
</select>市
<select id="District" name="District" class="select">
</select>区(县、县级市)
</div>
</form>
</body>
</html>
<script type="text/javascript">
var province = document.getElementById("Province");
var city = document.getElementById("City");
var district = document.getElementById("District");
function loadProvince(value) {
province.options.length = 0;
for (var i in areas) {
var area = areas[i];
if (area[0] == "0")
province.options.add(new Option(area[2], area[2]));
}
if (value)
province.value = value;
}
function loadCity(value) {
city.options.length = 0;
for (var i in areas) {
var area = areas[i];
if (area[0] == province.value)
city.options.add(new Option(area[2], area[2]));
}
if (value)
city.value = value;
}
function loadDistrict(value) {
district.options.length = 0;
for (var i in areas) {
var area = areas[i];
if (area[0] == city.value)
district.options.add(new Option(area[2], area[2]));
}
if (value)
district.value = value;
}
$(function () {
$("#Province").change(function () { loadCity(); loadDistrict(); });
$("#City").change(function () { loadDistrict(); });
loadProvince("@tmpModel.Province");
loadCity("@tmpModel.City");
loadDistrict("@tmpModel.District");
});
</script>