省市区级联选择

时间:2021-09-07 11:36:50
<!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