<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>省市区级联选择</title>
<script type="text/javascript" src="/Content/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/Content/js/public.js"></script>
<style type="text/css">
body, html, ul {
margin: 0px;
padding: 0px;
}
#AreaList {
list-style-type: none;
}
#AreaList li {
float: left;
line-height: 30px;
height: 30px;
margin-right: 5px;
}
</style>
</head>
<body>
<ul id="AreaList">
<li>省份:<select name="Provice" id="Provice">
<option value="-1">请选择</option>
</select></li>
<li>城市:<select name="City" id="City">
<option value="-1">请选择</option>
</select></li>
<li>县区:<select name="Town" id="Town">
<option value="-1">请选择</option>
</select></li>
<li><span id="Msg"></span></li>
</ul>
<script type="text/javascript">
var url = "/Pages/Hander/GetAreaTown.ashx";
$(document).ready(function () {
BindOption("Provice", { "flag": "Areas", "Area_ID": 0 }, function () {
var areaCodes = "";
if (areaCodes != "") {
loadProvice(areaCodes);
}
});
$("#Provice").change(function () {
BindOption("City", { "flag": "Areas", "Area_ID": $("#Provice").val() });
$("#City").trigger("change");
});
$("#City").change(function () {
BindOption("Town", { "flag": "Areas", "Area_ID": $("#City").val() });
$("#Town").trigger("change");
});
$("#Town").change(function () {
var values = { "Provice": { name: $("#Provice option:selected").text(), value: $("#Provice").val() }, "City": { name: $("#City option:selected").text(), value: $("#City").val() }, "Town": { name: $("#Town option:selected").text(), value: $("#Town").val() } };
//alert(values.Provice.name + ":" + values.Provice.value + "||" + values.City.name + ":" + values.City.value + "||" + values.Town.name + ":" + values.Town.value);
if (parent.areaChanger)
parent.areaChanger.call(this, values);
});
});
/**
*==========================
****加载数据***
*==========================
*@para Ajax请求参数
*@id：需要绑定的下拉框ID
*@fn：回调函数
*/
function BindOption(id, para, fn) {
$("#" + id).empty();
$("#" + id).append("<option value=\"-1\">请选择</option>");
if (para.Area_ID != "-1") {
changLoader(true, "Msg");
getAjax(url, para, function (data) {
if (data.success) {
var list = data.data, opt = "";
for (var i = 0; i < list.length; i++) {
opt += "<option value=\"" + list[i]['Area_ID'] + "\">" + list[i]['Area_Name'] + "</option>";
}
$("#" + id).append(opt);
}
changLoader(false, "Msg");
if (fn)
fn.call(this);
});
}
}
/**
*==========================
****加载数据***
*==========================
*@codeStr 城市区域字符串例如:13,1303,130603依次是ProviceID,CityID,TownID
*@author：叶明龙
*@time：2014/06/09
*/
function loadProvice(codeStr) {
var datas = codeStr.split(",");
$("#Provice").val(datas[0]);
BindOption("City", { "flag": "Areas", "Area_ID": datas[0] }, function () {
$("#City").val(datas[1]);
});
BindOption("Town", { "flag": "Areas", "Area_ID": datas[1] }, function () {
$("#Town").val(datas[2]);
});
}
</script>
</body>
</html>
Provice.zip
