Because the project needs to implement a provincial and municipal linkage, because the business has some special needs, using the existing plug-in slightly inconvenient, I realized a. First need to save the area data JS data file, I named Areadata.js here, the content is as follows:
/** * Save Region Information * Data format * Areadata = [{' Pro ': ' Beijing ', ' cities ': ' {'-1 ': ' Beijing '}}, {...}] * The municipality exists-1, which means the 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 by One ":" \u987a\u4e49 "," one ":" \u660c\u5e73 "," 16 ":" \u5927\u5174 "," "": "\u5e73\u8c37", "\u6000\u67d4" ":" \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 "," 13 ": "\u91d1\u5c71", "+": "\u677e\u6c5f", "" ":" \u9752\u6d66 "," N ":" \u5949\u8d24 "," + ":" \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 "," + ":" \u5b81\u6cb3 "," the "" \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 "," "Ten": "\u53cc\u6322", "one-by-one": "\u6e1d\u5317", "one": "\u5df4\u5357", "" ":" \u9ed4\u6c5f "," + ":" \u957f\ U5BFF "," "\u7da6\u6c5f": "\u6f7c\u5357", "+": "\u94dc\u6881", "+": "\u5927\u8db3", "+": "\u8363\u660c", "20 ":" \u74a7\u5c71 "," + ":" \u6881\u5e73 "," $ ":" \u57ce\u53e3 "," All ":" \U4E30\U90FD "," "": "\u57ab\u6c5f", "" ": \u6b66\ u9686 "," \u5fe ":"0\U53BF "," ":" \U5F00\U53BF "," "": "\u4e91\u9633", "" ":" \u5949\u8282 "," "": "\u5deb\u5c71", "to": "\U5DEB\U6EAA", " ":" "\u77f3\u67f1", "\u79c0\u5c71": "\u9149\u9633", "\U6C5F\U6D25": "\u5f6d\u6c34", "" The "" "," 37 ":" \ U5408\u5ddd "," ":" \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 "," 13 ":" \u961c\u9633 "," + ":" \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 "," 13 ":" \u6cb3\u6c60 "," + ":" \u6765\u5bbe "," "": "\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 ($) {/** * Provincial 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 (!$.i Sarray (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 municipal information var provicneid = Opts.provinceid; var Cityid = Opts.cityid; var isshowdefaultval = Opts.isshowdefaultval; var isdealcomarea = Opts.isdealcomarea; var defaultdata = [' Please select ', '-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>"); }; Province Change Linkage City dropdown var changehandler = function () {var Provinceid = $province. val (); Tmparr = []; Non-provincial "Please select" case, do not show the city "please chooseSelect "Provinceid = =-2 && isshowdefaultval && addopt (defaultdata[1],defaultdata[0]); if (Provinceid! =-2) {$.each (areadata[provinceid][' cities '), function (CID, city) {//whether only show municipality if (Isdealcomarea && Provinceid < 4) {addopt (Cityid, areadata[provinceid][' Pro '], Cityid); return false; }else {CID! =-1 && addopt (CID, City, Cityid); } }); } $city. html (Tmparr.join (")); }; Initialize 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 (")); }; Initialize event var init = function () {initprovince (); Provincial linkage Control $province. On (' Change ', changehandler); Changehandler (); } init (); return this; };} (JQuery));
The basic structure of the example can be adjusted as needed:
<! DOCTYPE html>
How to use: The first type: Initialize the provinces and cities selection$ ('. Area '). Cityselect (Areadata);
Effect: The second: The default does not show "please select"$ ('. Area '). Cityselect (Areadata, { isshowdefaultval:false });
Effect: The Third Kind: have the initial provinces and cities$ ('. Area '). Cityselect (Areadata, { provinceid:10, cityid:3, isshowdefaultval:false });
Effect: The fourth kind: belongs to the special demand of the business, when is the municipality, only displays the municipality, does not display the partition (this demand is more special)$ ('. Area '). Cityselect (Areadata, { provinceid:0, Cityid:-1, isdealcomarea:true, isshowdefaultval : false });
Effect: Do a record here, welcome to shoot Bricks ~