效果演示：
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数据文件：
点击下载