由于项目需要需要实现一个省市联动，由于业务有一些特殊的需求，使用现有的插件略有不便，就自己实现了一个。
首先需要保存地区数据的JS数据文件，我这里命名为areaData.js，内容如下：
/**
* 保存地区信息
* 数据格式
* areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}]
* 直辖市存在-1，表示就是直辖市
*/
(function(window) {
window.areaData = [{"pro":"u5317u4eac","cities":{"-1":"u5317u4eac","0":"u4e1cu57ceu533a","1":"u897fu57ceu533a","4":"u671du9633u533a","5":"u4e30u53f0u533a","6":"u77f3u666fu5c71u533a","7":"u6d77u6dc0u533a","8":"u95e8u5934u6c9f","9":"u623fu5c71","10":"u901au5dde","11":"u987au4e49","12":"u660cu5e73","13":"u5927u5174","14":"u5e73u8c37","15":"u6000u67d4","16":"u5bc6u4e91","17":"u5ef6u5e86"}},{"pro":"u4e0au6d77","cities":{"-1":"u4e0au6d77","0":"u9ec4u6d66","2":"u5f90u6c47","3":"u957fu5b81","4":"u9759u5b89","5":"u666eu9640","6":"u95f8u5317","7":"u8679u53e3","8":"u6768u6d66","9":"u95f5u884c","10":"u5b9du5c71","11":"u5609u5b9a","12":"u6d66u4e1c","13":"u91d1u5c71","14":"u677eu6c5f","15":"u9752u6d66","17":"u5949u8d24","18":"u5d07u660e"}},{"pro":"u5929u6d25","cities":{"-1":"u5929u6d25","0":"u548cu5e73u533a","1":"u4e1cu4e3du533a","2":"u6cb3u4e1cu533a","3":"u897fu9752u533a","4":"u6cb3u897fu533a","5":"u6d25u5357u533a","6":"u5357u5f00u533a","7":"u5317u8fb0u533a","8":"u6cb3u5317u533a","9":"u6b66u6e05u533a","10":"u7ea2u6865u533a","14":"u5b81u6cb3","15":"u9759u6d77","16":"u5b9du577b","17":"u84dfu53bf","18":"u6ee8u6d77u65b0u533a"}},{"pro":"u91cdu5e86","cities":{"-1":"u91cdu5e86","0":"u4e07u5dde","1":"u6daau9675","2":"u6e1du4e2d","3":"u5927u6e21u53e3","4":"u6c5fu5317","5":"u6c99u576au575d","6":"u4e5du9f99u5761","7":"u5357u5cb8","8":"u5317u789a","9":"u4e07u76db","10":"u53ccu6322","11":"u6e1du5317","12":"u5df4u5357","13":"u9ed4u6c5f","14":"u957fu5bff","15":"u7da6u6c5f","16":"u6f7cu5357","17":"u94dcu6881 ","18":"u5927u8db3","19":"u8363u660c","20":"u74a7u5c71","21":"u6881u5e73","22":"u57ceu53e3","23":"u4e30u90fd","24":"u57abu6c5f","25":"u6b66u9686","26":"u5fe0u53bf","27":"u5f00u53bf","28":"u4e91u9633","29":"u5949u8282","30":"u5debu5c71","31":"u5debu6eaa","32":"u77f3u67f1","33":"u79c0u5c71","34":"u9149u9633","35":"u5f6du6c34","36":"u6c5fu6d25","37":"u5408u5ddd","38":"u6c38u5ddd","39":"u5357u5ddd"}},{"pro":"u6cb3u5317","cities":["u77f3u5bb6u5e84","u90afu90f8","u90a2u53f0","u4fddu5b9a","u5f20u5bb6u53e3","u627fu5fb7","u5ecau574a","u5510u5c71","u79e6u7687u5c9b","u6ca7u5dde","u8861u6c34"]},{"pro":"u5c71u897f","cities":["u592au539f","u5927u540c","u9633u6cc9","u957fu6cbb","u664bu57ce","u6714u5dde","u5415u6881","u5ffbu5dde","u664bu4e2d","u4e34u6c7e","u8fd0u57ce"]},{"pro":"u5185u8499u53e4","cities":["u547cu548cu6d69u7279","u5305u5934","u4e4cu6d77","u8d64u5cf0","u547cu4f26u8d1du5c14u76df","u963fu62c9u5584u76df","u901au8fbd","u5174u5b89u76df","u4e4cu5170u5bdfu5e03u76df","u9521u6797u90edu52d2u76df","u5df4u5f66u6dd6u5c14u76df","u9102u5c14u591au65af"]},{"pro":"u8fbdu5b81","cities":["u6c88u9633","u5927u8fde","u978du5c71","u629au987a","u672cu6eaa","u4e39u4e1c","u9526u5dde","u8425u53e3","u961cu65b0","u8fbdu9633","u76d8u9526","u94c1u5cad","u671du9633","u846bu82a6u5c9b"]},{"pro":"u5409u6797","cities":["u957fu6625","u5409u6797","u56dbu5e73","u8fbdu6e90","u901au5316","u767du5c71","u677eu539f","u767du57ce","u5ef6u8fb9"]},{"pro":"u9ed1u9f99u6c5f","cities":["u54c8u5c14u6ee8","u9f50u9f50u54c8u5c14","u7261u4e39u6c5f","u4f73u6728u65af","u5927u5e86","u7ee5u5316","u9e64u5c97","u9e21u897f","u9ed1u6cb3","u53ccu9e2du5c71","u4f0au6625","u4e03u53f0u6cb3","u5927u5174u5b89u5cad"]},{"pro":"u6c5fu82cf","cities":["u5357u4eac","u9547u6c5f","u82cfu5dde","u5357u901a","u626cu5dde","u76d0u57ce","u5f90u5dde","u8fdeu4e91u6e2f","u5e38u5dde","u65e0u9521","u5bbfu8fc1","u6cf0u5dde","u6deeu5b89"]},{"pro":"u6d59u6c5f","cities":["u676du5dde","u5b81u6ce2","u6e29u5dde","u5609u5174","u6e56u5dde","u7ecdu5174","u91d1u534e","u8862u5dde","u821fu5c71","u53f0u5dde","u4e3du6c34"]},{"pro":"u5b89u5fbd","cities":{"0":"u5408u80a5","1":"u829cu6e56","2":"u868cu57e0","3":"u9a6cu978du5c71","4":"u6deeu5317","5":"u94dcu9675","6":"u5b89u5e86","7":"u9ec4u5c71","8":"u6ec1u5dde","9":"u5bbfu5dde","10":"u6c60u5dde","11":"u6deeu5357","13":"u961cu9633","14":"u516du5b89","15":"u5ba3u57ce","16":"u4eb3u5dde"}},{"pro":"u798fu5efa","cities":["u798fu5dde","u53a6u95e8","u8386u7530","u4e09u660e","u6cc9u5dde","u6f33u5dde","u5357u5e73","u9f99u5ca9","u5b81u5fb7"]},{"pro":"u6c5fu897f","cities":["u5357u660cu5e02","u666fu5fb7u9547","u4e5du6c5f","u9e70u6f6d","u840du4e61","u65b0u4f59","u8d63u5dde","u5409u5b89","u5b9cu6625","u629au5dde","u4e0au9976"]},{"pro":"u5c71u4e1c","cities":["u6d4eu5357","u9752u5c9b","u6dc4u535a","u67a3u5e84","u4e1cu8425","u70dfu53f0","u6f4du574a","u6d4eu5b81","u6cf0u5b89","u5a01u6d77","u65e5u7167","u83b1u829c","u4e34u6c82","u5fb7u5dde","u804au57ce","u6ee8u5dde","u83cfu6cfd"]},{"pro":"u6cb3u5357","cities":["u90d1u5dde","u5f00u5c01","u6d1bu9633","u5e73u9876u5c71","u5b89u9633","u9e64u58c1","u65b0u4e61","u7126u4f5c","u6feeu9633","u8bb8u660c","u6f2fu6cb3","u4e09u95e8u5ce1","u5357u9633","u5546u4e18","u4fe1u9633","u5468u53e3","u9a7bu9a6cu5e97","u6d4eu6e90"]},{"pro":"u6e56u5317","cities":["u6b66u6c49","u5b9cu660c","u8346u5dde","u8944u6a0a","u9ec4u77f3","u8346u95e8","u9ec4u5188","u5341u5830","u6069u65bd","u6f5cu6c5f","u5929u95e8","u4ed9u6843","u968fu5dde","u54b8u5b81","u5b5du611f","u9102u5dde","u795eu519cu67b6"]},{"pro":"u6e56u5357","cities":["u957fu6c99","u5e38u5fb7","u682au6d32","u6e58u6f6d","u8861u9633","u5cb3u9633","u90b5u9633","u76cau9633","u5a04u5e95","u6000u5316","u90f4u5dde","u6c38u5dde","u6e58u897f","u5f20u5bb6u754c"]},{"pro":"u5e7fu4e1c","cities":["u5e7fu5dde","u6df1u5733","u73e0u6d77","u6c55u5934","u4e1cu839e","u4e2du5c71","u4f5bu5c71","u97f6u5173","u6c5fu95e8","u6e5bu6c5f","u8302u540d","u8087u5e86","u60e0u5dde","u6885u5dde","u6c55u5c3e","u6cb3u6e90","u9633u6c5f","u6e05u8fdc","u6f6eu5dde","u63edu9633","u4e91u6d6e"]},{"pro":"u5e7fu897f","cities":{"0":"u5357u5b81","1":"u67f3u5dde","2":"u6842u6797","3":"u68a7u5dde","4":"u5317u6d77","5":"u9632u57ceu6e2f","6":"u94a6u5dde","7":"u8d35u6e2f","8":"u7389u6797","11":"u8d3au5dde","12":"u767eu8272","13":"u6cb3u6c60","14":"u6765u5bbe","15":"u5d07u5de6"}},{"pro":"u6d77u5357","cities":["u6d77u53e3","u4e09u4e9a","u4e09u6c99","u4e94u6307u5c71","u743cu6d77","u510bu5dde","u6587u660c","u4e07u5b81","u4e1cu65b9","u5b9au5b89","u5c6fu660c","u6f84u8fc8","u4e34u9ad8","u767du6c99","u660cu6c5f","u4e50u4e1c","u9675u6c34","u4fddu4ead","u743cu4e2d"]},{"pro":"u56dbu5ddd","cities":["u6210u90fd","u7ef5u9633","u5fb7u9633","u81eau8d21","u6500u679du82b1","u5e7fu5143","u5185u6c5f","u4e50u5c71","u5357u5145","u5b9cu5bbe","u5e7fu5b89","u8fbeu5dde","u96c5u5b89","u7709u5c71","u7518u5b5c","u51c9u5c71","u6cf8u5dde","u963fu575du5dde","u9042u5b81u5e02","u5df4u4e2du5e02","u8d44u9633u5e02"]},{"pro":"u8d35u5dde","cities":["u8d35u9633","u516du76d8u6c34","u9075u4e49","u5b89u987a","u94dcu4ec1","u9ed4u897fu5357","u6bd5u8282","u9ed4u4e1cu5357","u9ed4u5357"]},{"pro":"u4e91u5357","cities":["u6606u660e","u5927u7406","u66f2u9756","u7389u6eaa","u662du901a","u695au96c4","u7ea2u6cb3","u6587u5c71","u666eu6d31","u897fu53ccu7248u7eb3","u4fddu5c71","u5fb7u5b8f","u4e3du6c5f","u6012u6c5f","u8feau5e86","u4e34u6ca7"]},{"pro":"u897fu85cf","cities":["u62c9u8428","u65e5u5580u5219","u5c71u5357","u6797u829d","u660cu90fd","u963fu91cc","u90a3u66f2"]},{"pro":"u9655u897f","cities":["u897fu5b89","u5b9du9e21","u54b8u9633","u94dcu5ddd","u6e2du5357","u5ef6u5b89","u6986u6797","u6c49u4e2d","u5b89u5eb7","u5546u6d1b"]},{"pro":"u7518u8083","cities":["u5170u5dde","u5609u5ceau5173","u91d1u660c","u767du94f6","u5929u6c34","u9152u6cc9","u5f20u6396","u6b66u5a01","u5b9au897f","u9647u5357","u5e73u51c9","u5e86u9633","u4e34u590f","u7518u5357"]},{"pro":"u5b81u590f","cities":["u94f6u5ddd","u77f3u5634u5c71","u5434u5fe0","u56fau539f","u4e2du536b"]},{"pro":"u9752u6d77","cities":["u897fu5b81","u6d77u4e1c","u6d77u5357","u6d77u5317","u9ec4u5357","u7389u6811","u679cu6d1b","u6d77u897f"]},{"pro":"u65b0u7586","cities":["u4e4cu9c81u6728u9f50","u77f3u6cb3u5b50","u514bu62c9u739bu4f9d","u4f0au7281","u5df4u97f3u90edu695e","u660cu5409","u514bu5b5cu52d2u82cfu67efu5c14u514bu5b5c","u535au5c14u5854u62c9","u5410u9c81u756a","u54c8u5bc6","u5580u4ec0","u548cu7530","u963fu514bu82cf","u5854u57ce","u963fu52d2u6cf0","u963fu62c9u5c14","u56feu6728u8212u514b","u4e94u5bb6u6e20","u5317u5c6f","u94c1u95e8u5173"]},{"pro":"u9999u6e2f","cities":["u9999u6e2fu7279u522bu884cu653fu533a"]},{"pro":"u6fb3u95e8","cities":["u6fb3u95e8u7279u522bu884cu653fu533a"]},{"pro":"u53f0u6e7e","cities":["u53f0u5317","u9ad8u96c4","u53f0u4e2d","u53f0u5357","u5c4fu4e1c","u5357u6295","u4e91u6797","u65b0u7af9","u5f70u5316","u82d7u6817","u5609u4e49","u82b1u83b2","u6843u56ed","u5b9cu5170","u57fau9686","u53f0u4e1c","u91d1u95e8","u9a6cu7956","u6f8eu6e56"]}];
})(window);
插件文件名为：provinceCity.js，源码：
(function($){
/**
* 省市联动
* @param {Array} areaData 地区数组 格式：[{pro: '北京', cities: {-1: 北京, 0: 东城区, ...}},{...}]
* @param {Object} options 一些配置选项
* @returns {Object} jQuery对象
*/
$.fn.citySelect = function(areaData, options){
if(!$.isArray(areaData)) return;
var opts = $.extend({
provinceID: -1,
cityID: -1,
isShowDefaultVal: true,
isDealComArea: false
}, options);
var $province = $(this).find('select').eq(0);
var $city = $(this).find('select').eq(1);
//-1是直辖市信息
var provicneID = opts.provinceID;
var cityID = opts.cityID;
var isShowDefaultVal = opts.isShowDefaultVal;
var isDealComArea = opts.isDealComArea;
var defaultData = ['请选择', '-2'];
var tmpArr = [];
//增加下拉项到临时数组
var addOpt = function(val,text,defVal){
tmpArr.push("<option value='"+val+"' "+(parseInt(defVal,10)==parseInt(val,10)+''?"selected":"")+">"+text+"</option>");
};
//省份变更联动城市下拉
var changeHandler = function(){
var provinceID = $province.val();
tmpArr = [];
//非省【请选择】情况下，不显示地市【请选择】
provinceID == -2 && isShowDefaultVal && addOpt(defaultData[1],defaultData[0]);
if(provinceID != -2) {
$.each(areaData[provinceID]['cities'], function(cid, city) {
//是否只显示直辖市
if(isDealComArea && provinceID < 4) {
addOpt(cityID, areaData[provinceID]['pro'], cityID);
return false;
}else {
cid != -1 && addOpt(cid, city， cityID);
}
});
}
$city.html(tmpArr.join(''));
};
//初始化省份
var initProvince = function() {
tmpArr = [];
//默认省级下拉
isShowDefaultVal && addOpt(defaultData[1],defaultData[0]);
$.each(areaData, function(pid,details){
addOpt(pid,details.pro,provicneID);
});
$province.html(tmpArr.join(''));
};
//初始化事件
var init = function() {
initProvince();
//省级联动 控制
$province.on('change', changeHandler);
changeHandler();
}
init();
return this;
};
}(jQuery));
可根据需要稍作调整
例子基本结构如下：
<!DOCTYPE html> <html> <head> <title>省市联动</title> <meta charset="utf-8"> </head> <body> <div class="area"> <select name="province"></select> <select name="city"></select> </div> <script src="areaData.js"></script> <script src="provinceCity.js"></script> </body> </html>
使用方法：
第一种：初始化省市选择
$('.area').citySelect(areaData);
效果：
第二种：默认不显示【请选择】
$('.area').citySelect(areaData, {
isShowDefaultVal: false
});
效果：
第三种：有初始省市
$('.area').citySelect(areaData, {
provinceID: 10,
cityID: 3,
isShowDefaultVal: false
});
效果：
第四种：属于业务的特殊需求，当为直辖市的时候，只显示直辖市，不显示分区（这个需求比较特殊）
$('.area').citySelect(areaData, {
provinceID: 0,
cityID: -1,
isDealComArea: true,
isShowDefaultVal: false
});
效果：
以上就是基于jquery实现省市联动效果的代码，在这里做一下记录，欢迎大家提建议，共同进步。