前台页面 js，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var fackData; // 数据库，先读取出来
function Load(selObj, targetObj) {
$.ajax({
url: 'GetRegionHandler.ashx',
data: "pid=" + selObj,
dataType: 'html',
contentType: 'application/html;charset=utf-8',
cache: false,
success: function(data) {
//根据返回值data.d判断是不是成功
fackData = data;
Change(0, "province");
Change($("#province option:selected").val(), "city");
Change($("#city option:selected").val(), "area");
},
error: function(xhr) {
//中间发生异常，查看xhr.responseText
alert("异常");
}
});
}
// 在选择时，改变值
function Change(parentId, targetObj) {
var dataRow = fackData.toString().split('@');
$("#" + targetObj).empty();
for (var i = 0; i < dataRow.length; i++) {
if (dataRow[i] != "") {
var dataCells = dataRow[i].toString().split('#');
if (dataCells[2] == parentId)
$("#" + targetObj).append("<option value='" + dataCells[0] + "'>" + dataCells[1] + "</option>");
}
}
if (targetObj == "province")
Change($("#province option:selected").val(), "city");
if (targetObj == "city")
Change($("#city option:selected").val(), "area");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="province" onchange="Change(this.options[this.options.selectedIndex].value, 'city')"></select>
<select id="city" onchange="Change(this.options[this.options.selectedIndex].value, 'area')"></select>
<select id="area"></select>
<script language="javascript" type="text/javascript">
Load();
</script>
</div>
</form>
</body>
</html>