基于jquery实现省市联动效果

由于项目需要需要实现一个省市联动，由于业务有一些特殊的需求，使用现有的插件略有不便，就自己实现了一个。

首先需要保存地区数据的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，源码：