jquery_jquery 기반의 시·도 연계 효과 구현

본 프로젝트는 지방자치단체 연계를 구현해야 하고, 사업상 특별한 요구사항이 있기 때문에 기존 플러그인을 사용하는 것이 조금 불편해서 직접 구현해봤습니다.
먼저 지역 데이터의 JS 데이터 파일을 저장해야 합니다. 이름을 AreaData.js로 지정했고 내용은 다음과 같습니다.

/**
 * 保存地区信息
 * 数据格式
 * areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}]
 * 直辖市存在-1，表示就是直辖市
 */
 (function(window) {
 window.areaData = [{"pro":"\u5317\u4eac","cities":{"-1":"\u5317\u4eac","0":"\u4e1c\u57ce\u533a","1":"\u897f\u57ce\u533a","4":"\u671d\u9633\u533a","5":"\u4e30\u53f0\u533a","6":"\u77f3\u666f\u5c71\u533a","7":"\u6d77\u6dc0\u533a","8":"\u95e8\u5934\u6c9f","9":"\u623f\u5c71","10":"\u901a\u5dde","11":"\u987a\u4e49","12":"\u660c\u5e73","13":"\u5927\u5174","14":"\u5e73\u8c37","15":"\u6000\u67d4","16":"\u5bc6\u4e91","17":"\u5ef6\u5e86"}},{"pro":"\u4e0a\u6d77","cities":{"-1":"\u4e0a\u6d77","0":"\u9ec4\u6d66","2":"\u5f90\u6c47","3":"\u957f\u5b81","4":"\u9759\u5b89","5":"\u666e\u9640","6":"\u95f8\u5317","7":"\u8679\u53e3","8":"\u6768\u6d66","9":"\u95f5\u884c","10":"\u5b9d\u5c71","11":"\u5609\u5b9a","12":"\u6d66\u4e1c","13":"\u91d1\u5c71","14":"\u677e\u6c5f","15":"\u9752\u6d66","17":"\u5949\u8d24","18":"\u5d07\u660e"}},{"pro":"\u5929\u6d25","cities":{"-1":"\u5929\u6d25","0":"\u548c\u5e73\u533a","1":"\u4e1c\u4e3d\u533a","2":"\u6cb3\u4e1c\u533a","3":"\u897f\u9752\u533a","4":"\u6cb3\u897f\u533a","5":"\u6d25\u5357\u533a","6":"\u5357\u5f00\u533a","7":"\u5317\u8fb0\u533a","8":"\u6cb3\u5317\u533a","9":"\u6b66\u6e05\u533a","10":"\u7ea2\u6865\u533a","14":"\u5b81\u6cb3","15":"\u9759\u6d77","16":"\u5b9d\u577b","17":"\u84df\u53bf","18":"\u6ee8\u6d77\u65b0\u533a"}},{"pro":"\u91cd\u5e86","cities":{"-1":"\u91cd\u5e86","0":"\u4e07\u5dde","1":"\u6daa\u9675","2":"\u6e1d\u4e2d","3":"\u5927\u6e21\u53e3","4":"\u6c5f\u5317","5":"\u6c99\u576a\u575d","6":"\u4e5d\u9f99\u5761","7":"\u5357\u5cb8","8":"\u5317\u789a","9":"\u4e07\u76db","10":"\u53cc\u6322","11":"\u6e1d\u5317","12":"\u5df4\u5357","13":"\u9ed4\u6c5f","14":"\u957f\u5bff","15":"\u7da6\u6c5f","16":"\u6f7c\u5357","17":"\u94dc\u6881 ","18":"\u5927\u8db3","19":"\u8363\u660c","20":"\u74a7\u5c71","21":"\u6881\u5e73","22":"\u57ce\u53e3","23":"\u4e30\u90fd","24":"\u57ab\u6c5f","25":"\u6b66\u9686","26":"\u5fe0\u53bf","27":"\u5f00\u53bf","28":"\u4e91\u9633","29":"\u5949\u8282","30":"\u5deb\u5c71","31":"\u5deb\u6eaa","32":"\u77f3\u67f1","33":"\u79c0\u5c71","34":"\u9149\u9633","35":"\u5f6d\u6c34","36":"\u6c5f\u6d25","37":"\u5408\u5ddd","38":"\u6c38\u5ddd","39":"\u5357\u5ddd"}},{"pro":"\u6cb3\u5317","cities":["\u77f3\u5bb6\u5e84","\u90af\u90f8","\u90a2\u53f0","\u4fdd\u5b9a","\u5f20\u5bb6\u53e3","\u627f\u5fb7","\u5eca\u574a","\u5510\u5c71","\u79e6\u7687\u5c9b","\u6ca7\u5dde","\u8861\u6c34"]},{"pro":"\u5c71\u897f","cities":["\u592a\u539f","\u5927\u540c","\u9633\u6cc9","\u957f\u6cbb","\u664b\u57ce","\u6714\u5dde","\u5415\u6881","\u5ffb\u5dde","\u664b\u4e2d","\u4e34\u6c7e","\u8fd0\u57ce"]},{"pro":"\u5185\u8499\u53e4","cities":["\u547c\u548c\u6d69\u7279","\u5305\u5934","\u4e4c\u6d77","\u8d64\u5cf0","\u547c\u4f26\u8d1d\u5c14\u76df","\u963f\u62c9\u5584\u76df","\u901a\u8fbd","\u5174\u5b89\u76df","\u4e4c\u5170\u5bdf\u5e03\u76df","\u9521\u6797\u90ed\u52d2\u76df","\u5df4\u5f66\u6dd6\u5c14\u76df","\u9102\u5c14\u591a\u65af"]},{"pro":"\u8fbd\u5b81","cities":["\u6c88\u9633","\u5927\u8fde","\u978d\u5c71","\u629a\u987a","\u672c\u6eaa","\u4e39\u4e1c","\u9526\u5dde","\u8425\u53e3","\u961c\u65b0","\u8fbd\u9633","\u76d8\u9526","\u94c1\u5cad","\u671d\u9633","\u846b\u82a6\u5c9b"]},{"pro":"\u5409\u6797","cities":["\u957f\u6625","\u5409\u6797","\u56db\u5e73","\u8fbd\u6e90","\u901a\u5316","\u767d\u5c71","\u677e\u539f","\u767d\u57ce","\u5ef6\u8fb9"]},{"pro":"\u9ed1\u9f99\u6c5f","cities":["\u54c8\u5c14\u6ee8","\u9f50\u9f50\u54c8\u5c14","\u7261\u4e39\u6c5f","\u4f73\u6728\u65af","\u5927\u5e86","\u7ee5\u5316","\u9e64\u5c97","\u9e21\u897f","\u9ed1\u6cb3","\u53cc\u9e2d\u5c71","\u4f0a\u6625","\u4e03\u53f0\u6cb3","\u5927\u5174\u5b89\u5cad"]},{"pro":"\u6c5f\u82cf","cities":["\u5357\u4eac","\u9547\u6c5f","\u82cf\u5dde","\u5357\u901a","\u626c\u5dde","\u76d0\u57ce","\u5f90\u5dde","\u8fde\u4e91\u6e2f","\u5e38\u5dde","\u65e0\u9521","\u5bbf\u8fc1","\u6cf0\u5dde","\u6dee\u5b89"]},{"pro":"\u6d59\u6c5f","cities":["\u676d\u5dde","\u5b81\u6ce2","\u6e29\u5dde","\u5609\u5174","\u6e56\u5dde","\u7ecd\u5174","\u91d1\u534e","\u8862\u5dde","\u821f\u5c71","\u53f0\u5dde","\u4e3d\u6c34"]},{"pro":"\u5b89\u5fbd","cities":{"0":"\u5408\u80a5","1":"\u829c\u6e56","2":"\u868c\u57e0","3":"\u9a6c\u978d\u5c71","4":"\u6dee\u5317","5":"\u94dc\u9675","6":"\u5b89\u5e86","7":"\u9ec4\u5c71","8":"\u6ec1\u5dde","9":"\u5bbf\u5dde","10":"\u6c60\u5dde","11":"\u6dee\u5357","13":"\u961c\u9633","14":"\u516d\u5b89","15":"\u5ba3\u57ce","16":"\u4eb3\u5dde"}},{"pro":"\u798f\u5efa","cities":["\u798f\u5dde","\u53a6\u95e8","\u8386\u7530","\u4e09\u660e","\u6cc9\u5dde","\u6f33\u5dde","\u5357\u5e73","\u9f99\u5ca9","\u5b81\u5fb7"]},{"pro":"\u6c5f\u897f","cities":["\u5357\u660c\u5e02","\u666f\u5fb7\u9547","\u4e5d\u6c5f","\u9e70\u6f6d","\u840d\u4e61","\u65b0\u4f59","\u8d63\u5dde","\u5409\u5b89","\u5b9c\u6625","\u629a\u5dde","\u4e0a\u9976"]},{"pro":"\u5c71\u4e1c","cities":["\u6d4e\u5357","\u9752\u5c9b","\u6dc4\u535a","\u67a3\u5e84","\u4e1c\u8425","\u70df\u53f0","\u6f4d\u574a","\u6d4e\u5b81","\u6cf0\u5b89","\u5a01\u6d77","\u65e5\u7167","\u83b1\u829c","\u4e34\u6c82","\u5fb7\u5dde","\u804a\u57ce","\u6ee8\u5dde","\u83cf\u6cfd"]},{"pro":"\u6cb3\u5357","cities":["\u90d1\u5dde","\u5f00\u5c01","\u6d1b\u9633","\u5e73\u9876\u5c71","\u5b89\u9633","\u9e64\u58c1","\u65b0\u4e61","\u7126\u4f5c","\u6fee\u9633","\u8bb8\u660c","\u6f2f\u6cb3","\u4e09\u95e8\u5ce1","\u5357\u9633","\u5546\u4e18","\u4fe1\u9633","\u5468\u53e3","\u9a7b\u9a6c\u5e97","\u6d4e\u6e90"]},{"pro":"\u6e56\u5317","cities":["\u6b66\u6c49","\u5b9c\u660c","\u8346\u5dde","\u8944\u6a0a","\u9ec4\u77f3","\u8346\u95e8","\u9ec4\u5188","\u5341\u5830","\u6069\u65bd","\u6f5c\u6c5f","\u5929\u95e8","\u4ed9\u6843","\u968f\u5dde","\u54b8\u5b81","\u5b5d\u611f","\u9102\u5dde","\u795e\u519c\u67b6"]},{"pro":"\u6e56\u5357","cities":["\u957f\u6c99","\u5e38\u5fb7","\u682a\u6d32","\u6e58\u6f6d","\u8861\u9633","\u5cb3\u9633","\u90b5\u9633","\u76ca\u9633","\u5a04\u5e95","\u6000\u5316","\u90f4\u5dde","\u6c38\u5dde","\u6e58\u897f","\u5f20\u5bb6\u754c"]},{"pro":"\u5e7f\u4e1c","cities":["\u5e7f\u5dde","\u6df1\u5733","\u73e0\u6d77","\u6c55\u5934","\u4e1c\u839e","\u4e2d\u5c71","\u4f5b\u5c71","\u97f6\u5173","\u6c5f\u95e8","\u6e5b\u6c5f","\u8302\u540d","\u8087\u5e86","\u60e0\u5dde","\u6885\u5dde","\u6c55\u5c3e","\u6cb3\u6e90","\u9633\u6c5f","\u6e05\u8fdc","\u6f6e\u5dde","\u63ed\u9633","\u4e91\u6d6e"]},{"pro":"\u5e7f\u897f","cities":{"0":"\u5357\u5b81","1":"\u67f3\u5dde","2":"\u6842\u6797","3":"\u68a7\u5dde","4":"\u5317\u6d77","5":"\u9632\u57ce\u6e2f","6":"\u94a6\u5dde","7":"\u8d35\u6e2f","8":"\u7389\u6797","11":"\u8d3a\u5dde","12":"\u767e\u8272","13":"\u6cb3\u6c60","14":"\u6765\u5bbe","15":"\u5d07\u5de6"}},{"pro":"\u6d77\u5357","cities":["\u6d77\u53e3","\u4e09\u4e9a","\u4e09\u6c99","\u4e94\u6307\u5c71","\u743c\u6d77","\u510b\u5dde","\u6587\u660c","\u4e07\u5b81","\u4e1c\u65b9","\u5b9a\u5b89","\u5c6f\u660c","\u6f84\u8fc8","\u4e34\u9ad8","\u767d\u6c99","\u660c\u6c5f","\u4e50\u4e1c","\u9675\u6c34","\u4fdd\u4ead","\u743c\u4e2d"]},{"pro":"\u56db\u5ddd","cities":["\u6210\u90fd","\u7ef5\u9633","\u5fb7\u9633","\u81ea\u8d21","\u6500\u679d\u82b1","\u5e7f\u5143","\u5185\u6c5f","\u4e50\u5c71","\u5357\u5145","\u5b9c\u5bbe","\u5e7f\u5b89","\u8fbe\u5dde","\u96c5\u5b89","\u7709\u5c71","\u7518\u5b5c","\u51c9\u5c71","\u6cf8\u5dde","\u963f\u575d\u5dde","\u9042\u5b81\u5e02","\u5df4\u4e2d\u5e02","\u8d44\u9633\u5e02"]},{"pro":"\u8d35\u5dde","cities":["\u8d35\u9633","\u516d\u76d8\u6c34","\u9075\u4e49","\u5b89\u987a","\u94dc\u4ec1","\u9ed4\u897f\u5357","\u6bd5\u8282","\u9ed4\u4e1c\u5357","\u9ed4\u5357"]},{"pro":"\u4e91\u5357","cities":["\u6606\u660e","\u5927\u7406","\u66f2\u9756","\u7389\u6eaa","\u662d\u901a","\u695a\u96c4","\u7ea2\u6cb3","\u6587\u5c71","\u666e\u6d31","\u897f\u53cc\u7248\u7eb3","\u4fdd\u5c71","\u5fb7\u5b8f","\u4e3d\u6c5f","\u6012\u6c5f","\u8fea\u5e86","\u4e34\u6ca7"]},{"pro":"\u897f\u85cf","cities":["\u62c9\u8428","\u65e5\u5580\u5219","\u5c71\u5357","\u6797\u829d","\u660c\u90fd","\u963f\u91cc","\u90a3\u66f2"]},{"pro":"\u9655\u897f","cities":["\u897f\u5b89","\u5b9d\u9e21","\u54b8\u9633","\u94dc\u5ddd","\u6e2d\u5357","\u5ef6\u5b89","\u6986\u6797","\u6c49\u4e2d","\u5b89\u5eb7","\u5546\u6d1b"]},{"pro":"\u7518\u8083","cities":["\u5170\u5dde","\u5609\u5cea\u5173","\u91d1\u660c","\u767d\u94f6","\u5929\u6c34","\u9152\u6cc9","\u5f20\u6396","\u6b66\u5a01","\u5b9a\u897f","\u9647\u5357","\u5e73\u51c9","\u5e86\u9633","\u4e34\u590f","\u7518\u5357"]},{"pro":"\u5b81\u590f","cities":["\u94f6\u5ddd","\u77f3\u5634\u5c71","\u5434\u5fe0","\u56fa\u539f","\u4e2d\u536b"]},{"pro":"\u9752\u6d77","cities":["\u897f\u5b81","\u6d77\u4e1c","\u6d77\u5357","\u6d77\u5317","\u9ec4\u5357","\u7389\u6811","\u679c\u6d1b","\u6d77\u897f"]},{"pro":"\u65b0\u7586","cities":["\u4e4c\u9c81\u6728\u9f50","\u77f3\u6cb3\u5b50","\u514b\u62c9\u739b\u4f9d","\u4f0a\u7281","\u5df4\u97f3\u90ed\u695e","\u660c\u5409","\u514b\u5b5c\u52d2\u82cf\u67ef\u5c14\u514b\u5b5c","\u535a\u5c14\u5854\u62c9","\u5410\u9c81\u756a","\u54c8\u5bc6","\u5580\u4ec0","\u548c\u7530","\u963f\u514b\u82cf","\u5854\u57ce","\u963f\u52d2\u6cf0","\u963f\u62c9\u5c14","\u56fe\u6728\u8212\u514b","\u4e94\u5bb6\u6e20","\u5317\u5c6f","\u94c1\u95e8\u5173"]},{"pro":"\u9999\u6e2f","cities":["\u9999\u6e2f\u7279\u522b\u884c\u653f\u533a"]},{"pro":"\u6fb3\u95e8","cities":["\u6fb3\u95e8\u7279\u522b\u884c\u653f\u533a"]},{"pro":"\u53f0\u6e7e","cities":["\u53f0\u5317","\u9ad8\u96c4","\u53f0\u4e2d","\u53f0\u5357","\u5c4f\u4e1c","\u5357\u6295","\u4e91\u6797","\u65b0\u7af9","\u5f70\u5316","\u82d7\u6817","\u5609\u4e49","\u82b1\u83b2","\u6843\u56ed","\u5b9c\u5170","\u57fa\u9686","\u53f0\u4e1c","\u91d1\u95e8","\u9a6c\u7956","\u6f8e\u6e56"]}];
})(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)+''&#63;"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를 기반으로 지방과 도시의 연계 효과를 구현하는 코드입니다. 여기에 기록하겠습니다. 누구나 제안하고 함께 진행할 수 있습니다.