The jquery plug-in implementation applies to the mobile end of the address selector _jquery

Recently in the work need to use the address selector, like the following, I would like to find a online, but did not find, so I wrote a jquery plugin.

Go directly to the code:

var provinces = {"A": {"Anhui": ["Hefei", "Wuhu", "Bangbu", "Huainan", "Maanshan", "Huaibei", "Tongling", "Anqing", "Huangshan", "Chuzhou", "Fuyang", "Suzhou", "Chaohu", "Liu'an", "Bozhou", "Chizhou", "Xuancheng"]}, "B": {"Beijing": ["Peking"]}, "C": {"Chongqing": ["Chongqing"]}, "F": {"Fujian": ["Fuzhou", "Xiamen", "Putian", "Sanming", "Quanzhou", " Zhangzhou "," Nanping "," Longyan "," Ningde "]}," G ": {" Gansu ": [" Lanzhou City "," Jiayuguan "," Jinchang "," Baiyin "," Tianshui "," Wuwei "," Zhangye "," Pingliang "," Jiuquan "," Qingyang City "," Dingxi City "," Longnan "," Linxia Hui Autonomous Prefecture, "Gannan Tibetan Autonomous Prefecture"], "Guangdong": ["Guangzhou", "Shenzhen", "Zhuhai", "Shantou", "Shaoguan", "Foshan", "Jiangmen", "Zhanjiang", "Maoming", "Zhaoqing", "Huizhou", "Meizhou", "Shanwei", "Heyuan", "Yangjiang", "Qingyuan", "Dongguan", "Zhongshan", "Chaozhou", "Jieyang", "Yunfu"], "Guangxi": ["Nanning", "Liuzhou", "Guilin", "Wuzhou", "Beihai", "Fangchenggang", "Qinzhou", "Guigang", "Yulin", "Baise",
 "Hezhou", "Hechi", "Guest City", "Chongzuo City"], "Guizhou": ["Guiyang", "Liupanshui", "Zunyi", "Anshun", "Tongren Prefecture", "the Buyi and Miao Autonomous Prefecture of southwest Guizhou", "Bijie Prefecture", "Southeast Guizhou Miao and Dong Autonomous Prefecture", "Qiannan Buyei and Miao Autonomous Prefecture"] }, "H": {"Hainan": ["Haikou", "Sanya"], "Hebei": [Shijiazhuang City "," Tangshan "," Qinhuangdao Shi "," Hanhan "," Xingtai "," Baoding "," Zhangjiakou "," Chengde "," Cangzhou "," Langfang "," Hengshui "]," Henan ": [" Zhengzhou City "," Kaifeng "," Luoyang "," Pingdingshan "," Anyang "," Hebi "," Xinxiang "," Jiaozuo "," Puyang "," Xuchang "," Leihe "," Sanmenxia Shi "," Nanyang "," Shangqiu "," Xinyang "," Zhoukou "," Zhumadian "]," Heilongjiang " : ["Harbin City", "Qiqihar", "Jixi", "Hegang", "Shuangyashan", "Daqing", "Yichun", "Jiamusi", "Qitaihe Shi", "Mudanjiang", "Heihe", "Suihua", "daxinganling"], "Hubei": ["Wuhan City", "Huangshi", "Shiyan", "Yichang", "Xiangfan", "Ezhou", "Jingmen", "Xiaogan", "Jinzhou", "Huanggang", "Xianning", "Suizhou", "Enshi", " Shennong frame "]," Hunan ": [" Changsha "," Zhuzhou "," Xiangtan "," Hengyang "," Shaoyang "," Yueyang "," Changde "," Zhangjiajie "," Yiyang "," Chenzhou "," Yongzhou "," Huaihua "," Loudi "," Xiangxi Tujia "]}," J ": {"Jilin": ["Changchun", "Jilin", "" Siping "," Liaoyuan "," Tonghua "," Bss "," Songyuan "," White City "," Yanbian Korean Autonomous Prefecture "]," Jiangsu ": [" Nanjing "," Wuxi "," Xuzhou "," Changzhou "," Suzhou "," Nantong "," " Lianyungang "," Huaian "," Yancheng "," Yangzhou "," Zhenjiang "," Taizhou "," Suqian "]," Jiangxi ": [" Nanchang "," Jingdezhen "," Pingxiang "," Jiujiang "," Xinyu "," Yingtan "," Ganzhou "," Jian "," Yichun "," Fuzhou ",  "Shangrao"]}, "L": {"Liaoning": ["Shenyang City", "] Dalian", "Anshan", "Fushun", "Benxi", "Dandong", "Jinzhou", "Yingkou", "Fuxin", "Liaoyang", "Panjin", "Tieling", "Chaoyang", "Huludao"]}, "N": {"Inner Mongolia": ["Hohhot City", "Baotou", "Wuhai", "Chifeng", "Tongliao", "Eerduosi", "Holonbuyr", "Bayan nur City", "Wulanchabu City", "League", "Xilin Gol", "Alxa League"], "Ningxia": ["Yinchuan", " Shizuishan "," Wuzhong "," Guyuan "," Zhongwei City "]}," Q ": {" Qinghai ": [" Xining City "," Haidong Prefecture "," Haibei Tibetan Autonomous Prefecture "," Huangnan Tibetan Autonomous Prefecture "," Hainan Tibetan Autonomous Prefecture "," Golog Tibetan Autonomous Prefecture "," Yushu Tibetan Autonomous Prefecture "," Sea Simon Haixi Tibetan Autonomous Prefecture "]}," S ": {" Shandong ": [" Jinan "," Qingdao "," Zibo "," Zaozhuang "," Dongying "," Yantai "," Weifang "," Jining "," Taian "," Weihai "," Rizhao "," Laiwu "," Linyi "," Dezhou "," Liaocheng "," Binzhou "," Heze "]," Shanxi ": [" Taiyuan City "," Datong "," Yangquan "," Changzhi "," Jincheng "," Shuozhou "," Jinzhong "," Yun City "," Xinzhou "," Linfen "," LVLiang Shi "]," Shaanxi ": [" Xi ' an city "," Tongchuan "," Baoji "," Xianyang "," Weinan "," Yanan "," Hanzhong "," Yulin "," Ankang "," Shangluo "]," Shanghai ": [" Shanghai City "]," Sichuan ": [" Chengdu City "," Zigong "," Panzhihua ", "Luzhou", "Deyang", "Mianyang", "Guangyuan", "" Suining "," Neijiang "," Leshan "," Nanchong "," Meishan "," Yibin "," Guangan "," Dazhou "," Yaan "," Bazhong "," Ziyang "," Aba "," The Tibetan and Qiang Autonomous Prefecture "," Ganzi "," Liangshan Yi Autonomous Prefecture "]}," T ": {" tianjing ": [" Tianjin "]}," X ": {" Tibet ": [" Lasa "," Changdu "," Shannan "," Xigazê "," Nagchu "," Ali "," Linzhi "]," Xinjiang ": [" Urumqi City, "Karamay", "Turpan", "Hami", "Changji Hui Autonomous Prefecture", "Bortala Mongol Autonomous Prefecture", "Bainguo", "Aksu Prefecture", "Kizilsu Kirgiz Zizhizhou", "Kashi", "Hotan Prefecture", "Isahasak", " Tacheng, "Altay", "Shihezi", "Aral City", "Tumshuk City", "Five Canal City"]}, "Y": {"Yunnan": ["Kunming", "Qujing", "Yuxi", "Baoshan", "Zhaotong", "Lijiang City", "Simao", "Lincang City", " Chuxiongzhou "," Honghe "," Wenshan "," Xishuangbanna Dai Autonomous Prefecture "," Dali Bai "," Dehong Dai and Jingpo Autonomous Prefecture "," Nujiang Lisu Autonomous Prefecture "," Dêqên Tibetan Autonomous Prefecture "]}," Z ": {" Zhejiang ": [" Hangzhou City ","

Ningbo "," Wenzhou "," Jiaxing "," Huzhou "," Shaoxing "," Jinhua "," Quzhou "," Zhoushan "," Taizhou "," Lishui "]}};
 (Function ($, win, doc) {var citypicker = function (el, options) {This.el = $ (EL);
 this.options = options;
 this.provinces = provinces;
 This.pro = null;
 This.city = null;

 This.eltype = this.el.is (' input ');
 This.init ();

 }; var p = CitypIcker.prototype;
 P.init = function () {this.initevent ();

 This.preventpopkeyboard ();

 };
 P.preventpopkeyboard = function () {if (This.eltype) {This.el.prop ("readonly", true);

 }
 };
  P.initevent = function () {This.el.on ("Focus", function (e) {var Pickerbox = $ (". Picker-box");
  if (Pickerbox[0]) {pickerbox.show ();
  else {this.create ();
 }}.bind (this));

 };
 P.create = function () {this.createcitypickerbox ();
 This.createprolist ();
 This.proclick ();
 This.createnavbar ();
 This.navevent ();

 };
 P.createcitypickerbox = function () {var probox = "<div class= ' Picker-box ' ></div>";
 $ ("Body"). Append (Probox);

 };
 P.createprolist = function () {var provinces = this.provinces;
 var Probox;
 var dl = "";
  for (Var letterkey in provinces) {var val = Provinces[letterkey];
  if (Provinces.hasownproperty (Letterkey)) {var dt = "<dt id= '" + Letterkey + "' >" + letterkey + "</dt>";
  var dd = ""; for (Var prokey in Val) {if (val. hasOwnProperty (Prokey)) {dd = "<dd data-letter=" + Letterkey + ">" + Prokey + "</dd>";
  } DL + = "<dl>" + dt + dd + "</dl>";

 } Probox = "<section class= ' Pro-picker ' >" + DL + "</section>";
 $ (". Picker-box"). Append (Probox);

 };
 P.createcitylist = function (letter, pro) {var cities = This.provinces[letter][pro];
 var ul, li = "";
 Cities.foreach (function (city, i) {Li + + <li>] + City + "</li>";

 });
 UL = "<ul class= ' City-picker ' >" + li + "</ul>";

 $ (". Picker-box"). Find (". City-picker"). Remove (). End (). append (UL);
 This.cityclick ();

 };
 P.proclick = function () {var = this;
  $ (". Pro-picker"). On ("click", Function (e) {var target = E.target;
  if ($ (target). Is ("DD")) {That.pro = $ (target). html ();
  var letter = $ (target). Data ("letter");

  That.createcitylist (letter, That.pro);
  $ (this). Hide ();
 }
 });

 };
 P.cityclick = function () {var = this; $ (". City-picker"). On ("Click", FuNction (e) {var target = E.target;
  if ($ (target). Is ("Li")) {that.city = $ (target). html ();
  if (that.eltype) {that.el.val (That.pro + "-" + that.city);
  else {that.el.html (That.pro + "-" + that.city);
  $ (". Picker-box"). Hide ();
  $ (". Pro-picker"). Show ();
  $ (this). Hide ();
 }
 });

 };
 P.createnavbar = function () {var str = ' abcdefghijklmnopqrstuvwxyz ';
 var arr = str.split ("");
 var a = "";
 Arr.foreach (function (item, i) {a + = ' <a href= ' # ' + item + ' > ' + item + ' </a> ';

 });

 var div = ' <div class= ' navbar ' > ' + A + ' </div> ';
 $ (". Picker-box"). Append (div);

 };
 P.navevent = function () {var = this;
 var NavBar = $ (". NavBar");
 var width = navbar.find ("a"). width ();
 var height = navbar.find ("a"). Height ();
  Navbar.on ("Touchstart", function (e) {$ (this). AddClass ("active");
 That.createletterprompt ($ (e.target). html ());

 });
  Navbar.on ("Touchmove", function (e) {e.preventdefault (); var touch = e.originalevent.touches[0];
  var pos = {"x": Touch.pagex, "y": touch.pagey};
  var x = pos.x, y = pos.y;
  $ (this). Find ("a"). each (function (i, item) {var offset = $ (item). offset ();
  var left = offset.left, top = offset.top; if (x > left && x < (left + width) && y > Top && y < (top + height)) {Location.hre
   f = item.href;
  That.changeletter ($ (item). HTML ());
 }
  });

 });
  Navbar.on ("Touchend", function () {$ (this). Removeclass ("active");
 $ (". Prompt"). Hide ();

 })
 };
 P.createletterprompt = function (letter) {var prompt = $ (". Prompt");
 if (Prompt[0]) {prompt.show ();
  else {var span = "<span class= ' Prompt ' >" + letter + "</span>";
 $ (". Picker-box"). Append (span);


 }
 };
 P.changeletter = function (letter) {var prompt = $ (". Prompt");
 Prompt.html (letter);

 }; $.fn.
 Citypicker = function (options) {return to New Citypicker (this, options);

 }} (Window.jquery, window, document));

The code is simple. One piece of code to mention here is:

Navbar.on ("Touchmove", function (e) {
 e.preventdefault ();
 var touch = e.originalevent.touches[0];
 var pos = {"x": Touch.pagex, "y": touch.pagey};
 var x = pos.x, y = pos.y;
 $ (this). Find ("a"). each (function (i, item) {
 var offset = $ (item). offset ();
 var left = offset.left, top = offset.top;
 if (x > left && x < (left + width) && y > Top && y < (top + height)) {
  location.hr EF = Item.href;
  That.changeletter ($ (item). HTML ());}});

This section is the code that navigates through the letters to the provinces. When the finger slides on the letter, the Touchmove event does not determine which is the current letter, because E.target is always the letter of Touchstart. So I had to figure out which letter the finger was on by the coordinates, which would lead to a problem where the 26-letter coordinates must be traversed for each slide, which is very inefficient, but I don't have a good idea at the moment.

The use of this plug-in is simple:

HTML code
<input type= "text" class= "City"/>

JS Code

$ (". City"). Citypicker ();

Demo:http://demo.jb51.net/js/2016/citypicker-master/test.html. It's best to open it with a mobile browser or a chrome emulator.

If you need a friend, you can download it from the http://www.jb51.net/jiaoben/430774.html.