效果演示：
html代码：
复制代码 代码如下:
省市区联动
demo:
请选择省份
请选择城市
请选择区县
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 = 请选择省份;
var initcity = 请选择城市;
var initdistrict = 请选择区县;
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 s = '';
if (comparelen === 0) {
if (pre !== && pre !== 0 && r[i].code === pre) {
s = ' selected=\selected\ ';
pre = '';
}
t += '' + r[i].name + '';
}
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 += '' + r[i].name + '';
}
}
}
if (initoption !== '') {
targetobj.html(initoption + t);
} else {
targetobj.html(t);
}
},
json
);
}
};
} ();
cityselector.init();
});
省市区json数据文件：点击下载