Realizing _jquery of linkage effect between provinces and cities based on jquery

Because the project needs to achieve a provincial and municipal linkage, because the business has some special needs, the use of existing plug-ins slightly inconvenient, on their own implementation of one.
first need to save the locale data JS data file, I am here named Areadata.js, the contents are as follows:

/** * Save Area Information * Data format * Areadata = [{' Pro ': ' Beijing ', ' cities ': {' 1 ': ' Beijing '}}, {...}] * Municipalities exist-1, said to be the central municipality (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 "," Ten ":" \u901a\u5dde "," One ":" "\u987a\u4e49", "a": "\u660c\u5e73", "the": "\u5927\u5174", "" ":" \u5e73\u8c37 "," ":" \u6000\u67d4 "," 16 ":" U5bc6\u4e91 "," "": "\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", "Ten": "\u5b9d\u5c71", "one": "\u5609\u5b9a", "one": "\u6d66\u4e1c", "a": "\u91d1" \u5c71 "," ":" \u677e\u6c5f "," ":" \u9752\u6d66 "," ":" \u5949\u8d24 "," a ":" \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 "," Ten ":" \u7ea2\u6865\u533a "," the ":" \u5b81\u6cb3 "," "": "\u9759\u6d77", "": "\u5b9d \u577b "," ":" \U84DF\U53BF "," ":" \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", "one": "\u6e1d\u5317", "one": "\u5df4\u5357", "the": "\u9ed4\u6c5f", "" ":" \U957F\U5BFF "," ":" \u7da6\ u6c5f "," ":" \u6f7c\u5357 "," ":" \u94dc\u6881 "," a ":" \u5927\u8db3 "," a ":" \u8363\u660c "," a ":" \u74a7\u5c71 "," 21 ":" \u6881\u5e73 "," "\u57ce\u53e3": "\U4E30\U90FD", "a": "\u57ab\u6c5f", "a": "\u6b66\u9686", "a": "\u5fe0\ U53BF "," \u5f ":"00\U53BF "," "": "\u4e91\u9633", "the": "\u5949\u8282", "a": "\u5deb\u5c71", "the": "\U5DEB\U6EAA", "the": "\u77f3\u67f1", "\u79c0\u5c71": "\u9149\u9633", "the": "\u5f6d\u6c34", "a": "\u6c5f\u6d25", "Panax Notoginseng": "\u5408\u5ddd", "38": " U6c38\u5ddd "," "": "\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 "," Ten ":" \u6c60\u5dde "," one ":" \u6dee\u5357 "," a ":" \u961c\u9633 "," 14 ": "\u516d\u5b89", "" ":" \u5ba3\u57ce "," ":" \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 "," one ":" \u8d3a\u5dde "," one ":" \u767e\u8272 "," a ":" \u6cb3\u6c60 "," 14 ": "\u6765\u5bbe", "a": "\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);

Plug-in file name: provincecity.js, Source:

(function ($) {/** * Provinces and cities linkage * @param {array} areadata region array format: [{pro: ' Beijing ', cities: {-1: Beijing, 0: Dongcheng District, ...}] * @param {Object} options some configuration options * @returns {Object} jquery Object */$.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 is the central municipality information var provicneid = Opts.provinceid;
 var Cityid = Opts.cityid;
 var isshowdefaultval = Opts.isshowdefaultval;
 var isdealcomarea = Opts.isdealcomarea;
 var defaultdata = [' Please choose ', '-2 '];
 
 var tmparr = []; Add Drop-down to temporary array var addopt = function (val,text,defval) {Tmparr.push ("<option value= '" +val+ "'" + parseint (defval,10) = = parseint (val,10) + "?"
 Selected ":" ") +" > "+text+" </option> ");
 
 };
 Provincial change linkage city drop-down var changehandler = function () {var Provinceid = $province. val ();
 
 Tmparr = [];
Non-province "Please select" case, do not show the city "please select" Provinceid = = 2 && isshowdefaultval && addopt (defaultdata[1],defaultdata[0)); if (Provinceid!=-2) {$.each (areadata[provinceid][' cities '], function (CID, city) {//whether to display only the central municipality if (Isdealcomarea &AMP;&A mp
 Provinceid < 4) {addopt (Cityid, areadata[provinceid][' Pro '], Cityid);
 return false;
 }else {CID!=-1 && addopt (CID, City, Cityid);
 }
 });
 $city. HTML (Tmparr.join ('));
 
 };
 Initialization of the province var initprovince = function () {Tmparr = [];
 Default provincial drop-down isshowdefaultval && addopt (defaultdata[1],defaultdata[0]);
 $.each (Areadata, function (pid,details) {addopt (Pid,details.pro,provicneid);
 });
 $province. HTML (Tmparr.join ('));
 
 };
 Initialization event var init = function () {initprovince ();
 Provincial linkage Control $province. On (' Change ', changehandler);
 Changehandler ();
 
 Init ();
 return this;
};
 } (JQuery));

　　

Can be adjusted slightly as needed

Examples of the basic structure are as follows:

<! DOCTYPE html>
 
 

How to use:
The first: the choice of the provinces and cities

$ ('. Area '). Cityselect (Areadata);

Effect:

Second: Do not show "select" By default

$ ('. Area '). Cityselect (Areadata, {
 isshowdefaultval:false
 });

Effect:

The third type: There are the initial provinces

$ ('. Area '). Cityselect (Areadata, {
 provinceid:10,
 cityid:3,
 isshowdefaultval:false
 });

Effect:

The fourth kind: belong to the special demand of the business, when for the municipality, show only municipality, do not show partition (this demand is more special)

$ ('. Area '). Cityselect (Areadata, {
 provinceid:0,
 Cityid:-1,
 isdealcomarea:true,
 Isshowdefaultval:false
 });

Effect:

The above is based on jquery to achieve the provincial and municipal linkage effect of the code, here to do a record, welcome everyone to make suggestions, common progress.