JQuery plug-in for Mobile Address selector _ jquery

This article shares with you a jQuery plug-in that implements the address selector for mobile terminals. If you need it, you can take it for reference. I recently used the address selector in my work. I wanted to find one on the Internet, but I didn't find one, so I wrote a jquery plug-in myself.

Go directly to the Code:

Var provinces = {"A": {"Anhui": ["Hefei", "Wuhu", "Bengbu City", "HuaiNan City", "Maanshan City", "Huaibei City ", "Tongling City", "Anqing City", "Huangshan city", "Chuzhou City", "Fuyang City", "Suzhou City", "Chaohu City", "Lu 'an city", "Luzhou city", "Chizhou city ", "xuancheng"]}, "B": {"Beijing": ["Beijing"]}, "C": {"Chongqing": ["Chongqing"]}, "F": {"Fujian": ["Fuzhou City", "Xiamen City", "Putian City", "sanming city", "Quanzhou City", "Zhangzhou City", "Nanping city ", "Longyan city", "Ningde City"]}, "G": {"Gansu": ["Lanzhou City", "Jiayuguan City", "Jinchang city", "Baiyin City", "Tianshui city ", "Wuwei City", "Changzhi City", "Pingliang city", "Jiuquan City", "Qingyang City", "Dingxi city", "Longnan City", "Linxia Hui Autonomous Prefecture", "Gannan Tibetan Autonomous Prefecture"], "Guangdong": ["Guangzhou City", "Shenzhen City", "Zhuhai City", "Shantou City", "Shaoguan City", "Foshan City", "Jiangmen City", "Zhanjiang city ", "Maoming City", "Zhaoqing City", "Huizhou City", "Meizhou City", "Shanwei City", "Heyuan City", "Yangjiang City", "Qingyuan City", "Dongguan City", "Zhongshan City ", "Chaozhou City", "Jieyang City", "yunfu City"], "Guangxi": ["Nanning City", "Liuzhou City", "Guilin City", "Wuzhou City", "Beihai City ", "Fangchenggang city", "Qinzhou City", "Guigang City", "Yulin City", "Baise City", "Hezhou City", "Hechi City", "Laibin City", "chongzuo City"], "Guizhou": ["Guiyang City", "liupanshui City", "Zunyi City", "Anshun City", "Tongren region", "Buyi and Miao Autonomous Prefecture in Southwest Guizhou", "Bijie region ", "Qiandongnan Miao and Dong Autonomous Prefecture", "Qiandongnan Buyi and Miao Autonomous Prefecture"]}, "H": {"Hainan": ["Haikou City", "Sanya City"], "Hebei ": ["Shijiazhuang City", "Tangshan City", "Qinhuangdao City", "Handan city", "Xingtai City", "Baoding City", "Zhangjiakou City", "Chengde City", "Cangzhou City ", "Langfang City", "Hengshui City"], "Henan": ["Zhengzhou City", "Kaifeng City", "Luoyang City", "Pingdingshan City", "Anyang city", "hebi City ", "Xinxiang City", "Jiaozuo City", "Puyang City", "xuchang City", "Luohe City", "Sanmenxia City", "Nanyang City", "Shangqiu City", "Xinyang City", "Zhoukou City ", "Zhumadian City"], "Heilongjiang": ["Harbin City", "Qiqihar City", "Jixi City", "Hegang City", "Shuangyashan City", "Daqing City", "Yichun City ", "Jiamusi City", "Qitaihe city", "Mudanjiang City", "Heihe City", "Suihua City", "Daxinganling region"], "Hubei": ["Wuhan City", "Huangshi city ", "Shiyan city", "Yichang City", "Xiangfan city", "Ezhou City", "Jingmen City", "Xiaogan City", "Jingzhou City", "Huanggang City", "Xianning City", "Suizhou City ", "Enshi Tujia and Miao Autonomous Prefecture", "Shennongjia"], "Hunan": ["Changsha City", "Zhuzhou city", "Xiangtan city", "Hengyang City", "Shaoyang City ", "Yueyang City", "Changde City", "Zhangjiajie City", "Yiyang City", "Chenzhou City", "Yongzhou City", "HuaiHua City", "loudi city ", "Xiangxi Tujia and Miao Autonomous Prefecture"]}, "J": {"Jilin": ["Changchun City", "Jilin City", "Siping City", "Liaoyuan City", "Tonghua City ", "Baishan City", "SongCheng", "Baicheng City", "Yanbian Korean Autonomous Prefecture"], "Jiangsu": ["Nanjing City", "Wuxi City", "Xuzhou City", "Changzhou City ", "Suzhou City", "Nantong City", "Lianyungang City", "Huai 'an city", "Yancheng City", "Yangzhou City", "Zhenjiang City", "Taizhou City", "Suqian City"], "Jiangxi": ["Nanchang city", "Jingdezhen City", "Pingxiang City", "Jiujiang city", "Xinyu City", "Yingtan City", "Ganzhou City", "Ji 'an city ", "Yichun City", "Fuzhou City", "Shangrao City"]}, "L": {"Liaoning": ["Shenyang City", "Dalian City", "Anshan City", "Fushun city ", "Benxi City", "Dandong City", "Jinzhou City", "Yingkou City", "Fuxin City", "Liaoyang city", "Panjin City", "Tieling City", "Chaoyang City ", "Huludao City"]}, "N": {"Inner Mongolia": ["Hohhot City", "Baotou City", "Wuhai City", "Chifeng City", "Tongliao City", "Erdos city ", "Hulunbeier City", "bayannaoer City", "ulanchabu City", "Xing 'an League", "xilingol League", "Alxa League"], "Ningxia": ["Yinchuan City", "Shizuishan city ", "wuzhong City", "Guyuan", "Zhongwei City"]}, "Q": {"Qinghai": ["Xining city", "Haidong region", "Haibei Tibetan Autonomous Prefecture ", "Huangnan Tibetan Autonomous Prefecture", "Hainan Tibetan Autonomous Prefecture", "Guoluo Tibetan Autonomous Prefecture", "Yushu Tibetan Autonomous Prefecture", "haixi Mongolian Tibetan Autonomous Prefecture"]}, "S": {"Shandong ": ["Jinan City", "Qingdao City", "Zibo city", "Zaozhuang city", "Dongying City", "Yantai City", "Weifang city", "Jining city", "tai'an City ", "Weihai City", "Rizhao City", "Laiwu City", "Linyi City", "Dezhou City", "Liaocheng City", "Binzhou City", "Heze city"], "Shanxi ": ["Taiyuan City", "Datong City", "Yangquan City", "Changzhi City", "Jincheng City", "Shuozhou City", "Jinzhong City", "Yuncheng City", "Xinzhou City ", "Linfen city", "Luliang City"], "Shaanxi": ["Xi'an City", "Tongchuan City", "Baoji City", "Xianyang city", "weinan city", "yan'an City ", "Hanzhong City", "Yulin City", "AnKang City", "Shangluo City"], "Shanghai": ["Shanghai"], "Sichuan": ["Chengdu ", "Zigong City", "Panzhihua City", "Luzhou city", "Deyang city", "Mianyang City", "Guangyuan City", "Suining city", "Neijiang City", "Leshan City", "Nanchong City ", "Meishan City", "Yibin City", "Guang 'an city", "dazhou City", "ya'an City", "Bazhong City", "Ziyang City", "ABA Tibetan and Qiang Autonomous Prefecture", "Ganzi Tibetan Autonomous Prefecture ", "Liangshan Yi Autonomous Prefecture"]}, "T": {"Tianjin": ["Tianjin"]}, "X": {"Tibet": ["Lhasa ", "Changdu region", "Shannan region", "Shigatse region", "Naqu region", "Alibaba region", "Nyingchi region"], "Xinjiang": ["Urumqi City ", "Karamay city", "Turpan region", "Hami region", "Changji Hui Autonomous Prefecture", "bortala mongolia Autonomous Prefecture", "bayingol mongolia Autonomous Prefecture", "Aksu region ", "kizzusu kerkiz Autonomous Prefecture", "Kashgar region", "Hotan region", "Ili Kazakh Autonomous Prefecture", "Tacheng region", "Altay region", "Shihezi City", "alaer City ", "Tumu shuke City", "wujiaqu City"]}, "Y": {"Yunnan": ["Kunming City", "Qujing City", "Yuxi city", "Baoshan City", "Zhaotong City ", "Lijiang City", "Simao City", "Lincang City", "Chuxiong Yi Autonomous Prefecture", "Honghe Hani and Yi Autonomous Prefecture", "Wenshan Zhuang and Miao Autonomous Prefecture", "Xishuangbanna Dai Autonomous Prefecture ", "Dali Bai Autonomous Prefecture", "Dehong Dai Jingpo Autonomous Prefecture", "Nujiang Yi Autonomous Prefecture", "diqing Tibetan Autonomous Prefecture"]}, "Z": {"Zhejiang": ["Hangzhou City ", "Ningbo City", "Wenzhou City", "Jiaxing city", "Huzhou City", "Shaoxing City", "Jinhua City", "Quzhou City", "Zhoushan City", "Taizhou City ", "Lishui City"] }}; (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 ="
"; $ (" 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 ="
 
 

  
  
"+ LetterKey +"
 
 
"; Var dd =" "; for (var proKey in val) {if (val. hasOwnProperty (proKey) {dd + ="
 
 

  
  
"+ ProKey +"
 
 
";}} Dl + ="
 
 

  
  
"+ Dt + dd +"
 
 
";}} ProBox ="
 
  
"+ Dl +"
 "; $ (". Picker-box "). append (proBox) ;}; p. createCityList = function (letter, pro) {var cities = this. provinces [letter] [pro]; var ul, li = ""; cities. forEach (function (city, I) {li + ="
"+ City +"
";}); Ul ="
 
 

  
  
"+ Li +"
 
 
"; $ (". Picker-box "). find (". city-picker "). remove (). end (). append (ul); this. cityClick () ;}; p. proClick = function () {var that = this; $ (". pro-picker "). on ("click", function (e) {var target = e.tar get; if ($ (target ). is ("dd") {that. pro = character (target).html (); var letter = $ (target ). data ("letter"); that. createCityList (letter, that. pro); $ (this ). hide () ;}}) ;}; p. cityClick = function () {var that = this; $ (". city-picker "). on ("click", function (e) {var target = e.tar get; if ($ (target ). is ("li") {that. city = destination (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 + = ''+ item +'';}); var p ='
'+ A +'
'; $ (". Picker-box "). append (p) ;}; p. navEvent = function () {var that = this; var navBar = $ (". navbar "); var width = navBar. find (""). width (); var height = navBar. find (""). height (); navBar. on ("touchstart", function (e) {$ (this ). addClass ("active"); that.createletterprompt(e.(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 (""). 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. href = item. href; that.changeletter(items (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 = "" + letter + ""; $ (". picker-box "). append (span) ;}}; p. changeLetter = function (letter) {var prompt = $ (". prompt "); prompt.html (letter) ;};$. fn. cityPicker = function (options) {return new CityPicker (this, options) ;}} (window. jQuery, window, document ));

The code is simple. The following code is required:

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.href = item.href;  that.changeLetter($(item).html()); } });});

This section is the code for navigating provinces with letters. When the cursor is slide, the touchmoveevent cannot determine which one is, because e.tar get is always the letter of touchstart. Therefore, I have to determine the letter on which the finger is located through coordinates, which leads to a problem. Each slide must traverse the coordinates of 26 letters, which is very inefficient, but at present, I have no good solutions.

This plug-in is easy to use:

// Html code

// Js Code $ (". city"). CityPicker ();

Demo: http://demo.jb51.net/js/2016/citypicker-master/test.html. It is best to use a mobile browser or chrome simulator.

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