您的位置：首页 > Web前端 > JQuery

基于jquery & json的省市区联动代码

2012-06-26 00:00 771 查看
效果演示：

html代码： 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>省市区联动</title> 
<script src="/Scripts/jquery.min.js" type="text/javascript"></script> 
<script src="/Scripts/script.js" type="text/javascript"></script> 
</head> 
<body> 
<h2>Demo:</h2> 
<select id="province"> 
<option value="0">请选择省份</option> 
</select> 
<select id="city"> 
<option value="0">请选择城市</option> 
</select> 
<select id="district"> 
<option value="0">请选择区县</option> 
</select> 

<!--下列为初始值(可选,编辑表单时设置)--> 
<input type="hidden" value="440000" id="pre_province"/> 
<input type="hidden" value="440500" id="pre_city"/> 
<input type="hidden" value="440511" id="pre_district"/> 

</body> 
</html>


script.js代码： 

/* 
author: elycir 
create: 2012-06 
description: 省市区三级(二级)联动 
*/ 
$(function () { 
var citySelector = function () { 
var province = $("#province"); 
var city = $("#city"); 
var district = $("#district"); 
var preProvince = $("#pre_province"); 
var preCity = $("#pre_city"); 
var preDistrict = $("#pre_district"); 
var jsonProvince = "/content/json-array-of-province.js"; 
var jsonCity = "/content/json-array-of-city.js"; 
var jsonDistrict = "/content/json-array-of-district.js"; 
var hasDistrict = true; 
var initProvince = "<option value='0'>请选择省份</option>"; 
var initCity = "<option value='0'>请选择城市</option>"; 
var initDistrict = "<option value='0'>请选择区县</option>"; 
return { 
Init: function () { 
var that = this; 
that._LoadOptions(jsonProvince, preProvince, province, null, 0, initProvince); 
province.change(function () { 
that._LoadOptions(jsonCity, preCity, city, province, 2, initCity); 
}); 
if (hasDistrict) { 
city.change(function () { 
that._LoadOptions(jsonDistrict, preDistrict, district, city, 4, initDistrict); 
}); 
province.change(function () { 
city.change(); 
}); 
} 
province.change(); 
}, 
_LoadOptions: function (datapath, preobj, targetobj, parentobj, comparelen, initoption) { 
$.get( 
datapath, 
function (r) { 
var t = ''; // t: html容器 
var s; // s: 选中标识 
var pre; // pre: 初始值 
if (preobj === undefined) { 
pre = 0; 
} else { 
pre = preobj.val(); 
} 
for (var i = 0; i < r.length; i++) { 
s = ''; 
if (comparelen === 0) { 
if (pre !== "" && pre !== 0 && r[i].code === pre) { 
s = ' selected=\"selected\" '; 
pre = ''; 
} 
t += '<option value=' + r[i].code + s + '>' + r[i].name + '</option>'; 
} 
else { 
var p = parentobj.val(); 
if (p.substring(0, comparelen) === r[i].code.substring(0, comparelen)) { 
if (pre !== "" && pre !== 0 && r[i].code === pre) { 
s = ' selected=\"selected\" '; 
pre = ''; 
} 
t += '<option value=' + r[i].code + s + '>' + r[i].name + '</option>'; 
} 
} 

} 
if (initoption !== '') { 
targetobj.html(initoption + t); 
} else { 
targetobj.html(t); 
} 
}, 
"json" 
); 
} 
}; 
} (); 
citySelector.Init(); 
});

省市区json数据文件：点击下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航