jquery Plugin-Provincial linkage

Source: Internet
Author: User

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 ~

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.