效果圖
直接上代碼：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/index.css">
<script src="../js/jquery-3.2.1.js"></script>
<script src="../js/bscroll.min.js"></script>
<script src="../js/city.js"></script>
<title>社保卡權益專區</title>
</head>
<body>
<!-- 城市列表 -->
<div class="cityPage" style="display: none;">
<div class="cityContent">
<div class="inputBox">
<input type="text" placeholder="中文 / 拼音首字母" id="findcityInp">
</div>
<div class="localCity">定位城市</div>
<div class="cityname">上海市</div>
</div>
<div class="city" >
<div class="city-wrapper city-wrapper-hook">
<div class="scroller-hook">
<div class="cities cities-hook"></div>
</div>
<div class="shortcut shortcut-hook"></div>
</div>
</div>
</div>
<script src="../js/index.js"></script>
</body>
</html>
index.css:
*{
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #f5f5f5;
font-size: 12px;
font-family: 'PingFang SC Regular', 'PingFang SC';
width: 100%;
height: 100%;
min-width: 320px;
max-width: 480px;
position: relative;
}
.cityPage{
width: 100%;
height: 100%;
/* border: 1px solid black; */
position: absolute;
top: 0;
display: flex;
flex-direction: column;
/* justify-content: center; */
}
.cityContent{
width: 100%;
height: 140px;
/* border: 1px solid black; */
background: #f7f7f9;
position: fixed;
z-index: 9999;
}
.inputBox input{
width: 90%;
height: 30px;
border: 1px solid rgb(215, 215, 215);
outline: none;
background:#fff;
margin-left: 4%;
border-radius: 4px;
padding-left: 4px;
color: #9e9e9e;
font-size: 14px;
margin-bottom: 16px;
margin-top: 14px;
}
.localCity{
color: #333;
font-size: 13px;
font-weight: bold;
margin-left:4.5% ;
margin-bottom: 16px;
}
.cityname{
font-size: 13px;
margin-left:4.5% ;
margin-bottom: 16px;
}
.city .city-wrapper {
position: fixed;
top: 138px;
bottom: 0;
width: 100%;
}
.city .city-wrapper .cities .title {
height: 28px;
padding-left: 16px;
line-height: 28px;
background-color: #f5f5f5;
font-family: Helvetica;
font-size:14px;
color: #878787;
}
.city .city-wrapper .cities .item {
height: 44px;
padding: 0 16px;
line-height: 44px;
font-size: 14px;
background-color: #fff;
}
.city .city-wrapper .cities .item .name {
display: block;
position: relative;
}
.city .city-wrapper .cities .item .name:before,
.city .city-wrapper .cities .item .name:after {
display: block;
position: absolute;
border-top: 1px solid #e5e5e5;
left: 0;
width: 100%;
content: ' ';
}
.city .city-wrapper .cities .item .name:before {
display: none;
top: 0;
}
.city .city-wrapper .cities .item .name:after {
display: block;
bottom: 0;
}
.city .city-wrapper .cities .item:active {
background-color: #fff;
}
.city .city-wrapper .cities .item:last-child .name:after {
display: none;
}
.city .city-wrapper .shortcut {
position: absolute;
z-index: 30;
width: 40px;
right: 0;
font-family: Helvetica;
}
.city .city-wrapper .shortcut .item {
height: 12px;
padding-top: 4px;
padding-left: 24px;
text-align: center;
font-size: 14px;
color: #9f9f9f
}
@media only screen and (max-height: 600px) {
.city .city-wrapper .shortcut .item {
padding-top: 3px;
}
}
index.js
$(function () {
var cityWrapper = document.querySelector('.city-wrapper-hook');
var cityScroller = document.querySelector('.scroller-hook');
var cities = document.querySelector('.cities-hook');
var shortcut = document.querySelector('.shortcut-hook');
var scroll;
var shortcutList = [];
var anchorMap = {};
//渲染城市
initCities(cityData);
bindEvent();
//點擊點擊城市後
clickAction()
//城市列表初始化
function initCities(cityData) {
var y = 0;
var titleHeight = 28;
var itemHeight = 44;
var lists = '';
var en = '<ul>';
cityData.forEach(function (group) {
var name = group.name;
lists += '<div class="title">' + name + '</div>';
lists += '<ul>';
group.cities.forEach(function (g) {
lists += '<li class="item" data-name="' + g.name + '" data-id="' + g.cityid + '" id="listId" >' + g.name + '</li>';
});
lists += '</ul>';
var name = group.name.substr(0, 1);
en += '<li data-anchor="' + name + '" class="item">' + name + '</li>';
var len = group.cities.length;
anchorMap[name] = y;
y -= titleHeight + len * itemHeight;
});
en += '</ul>';
cities.innerHTML = lists;
shortcut.innerHTML = en;
shortcut.style.top = (cityWrapper.clientHeight - shortcut.clientHeight) / 2 + 'px';
scroll = new window.BScroll(cityWrapper, {
probeType: 3
});
// scroll.on('scroll', function (pos) {
// console.log(Math.round(pos.y));
// });
scroll.scrollTo(0, 0);
}
//滑動城市右邊的字母
function bindEvent() {
var touch = {};
var firstTouch;
shortcut.addEventListener('touchstart', function (e) {
var anchor = e.target.getAttribute('data-anchor');
firstTouch = e.touches[0];
touch.y1 = firstTouch.pageY;
touch.anchor = anchor;
scrollTo(anchor);
});
shortcut.addEventListener('touchmove', function (e) {
firstTouch = e.touches[0];
touch.y2 = firstTouch.pageY;
var anchorHeight = 16;
var delta = (touch.y2 - touch.y1) / anchorHeight | 0;
var anchor = shortcutList[shortcutList.indexOf(touch.anchor) + delta];
scrollTo(anchor);
e.preventDefault();
e.stopPropagation();
});
function scrollTo(anchor) {
var maxScrollY = cityWrapper.clientHeight - cityScroller.clientHeight;
var y = Math.min(0, Math.max(maxScrollY, anchorMap[anchor]));
if (typeof y !== 'undefined') {
scroll.scrollTo(0, y);
}
}
}
//點擊後的操作
function clickAction(){
var touchFlag=false;
cities.addEventListener('touchstart',function(){
touchFlag = false;
},false)
cities.addEventListener('touchmove',function(){
touchFlag = true;
},false)
cities.addEventListener('touchend',function(e){
if(!touchFlag){
console.log(e.target.getAttribute('data-id'));
}
touchFlag=false
},false)
}
//輸入城市查詢
var key = false;
$('#findcityInp').on('compositionstart', function () {
key = true;
console.log('不搜索')
});
$('#findcityInp').on('compositionend', function (e) {
var keyWord = $.trim(e.target.value);
if(keyWord.length>0){
var result = findCity(keyWord, cityData);
initCities(result);
}else{
initCities(cityData);
}
});
$('#findcityInp').on('input', function (e) {
var keyWord = $.trim(e.target.value);
var result = findCity(keyWord, cityData);
// console.log(result)
initCities(result)
});
//城市查詢
function findCity(keyWord, data) {
if (!(data instanceof Array)) return;
var reg = new RegExp(keyWord);
var arr = [];
var obj ={
name:'',
cities:[]
}
if(keyWord.length>0 && checkCh(keyWord)==false){
data.forEach((item, index) => {
item.cities.forEach((childItem, childIndex) => {
if (childItem.tags.match(reg)) {
obj.name = childItem.tags[0];
obj.cities.push(childItem)
arr=[obj]
}
})
})
}else if(keyWord.length ==1 && checkCh(keyWord)==true){
data.forEach((item,index)=>{
if(item.name == keyWord){
// console.log(item)
arr.push(item)
}
})
}
else{
arr = data
}
return arr;
}
//判斷英文和漢字
function count(str) {
var arr = str.split(''),
len = arr.length,
count = 0;
for (var i = 0; i < len; i++) {
var s = escape(arr[i]); //例如：s='你';escape(a) ; "%u4F60"
if (s.indexOf('%u')) {
count = count + 2;
} else {
count++;
}
}
return count;
}
//判讀輸入的字符是否是英文
function checkCh(str){
var RegExp = /^[a-zA-Z]{1}$/;
return RegExp.test(str);
}
})
city.js
//城市數據
var cityData = [{
"name": "A",
"cities": [{
"name": "阿拉善盟",
"tags": "ALASHANMENG 阿拉善盟",
"cityid": "152900"
}, {
"name": "鞍山市",
"tags": "ANSHANSHI 鞍山市",
"cityid": "210300"
}, {
"name": "安慶市",
"tags": "ANQINGSHI 安慶市",
"cityid": "340800"
}, {
"name": "安陽市",
"tags": "ANYANGSHI 安陽市",
"cityid": "410500"
}, {
"name": "阿壩藏族羌族自治州",
"tags": "ABAZANGZUQIANGZUZIZHIZHOU 阿壩藏族羌族自治州",
"cityid": "513200"
}, {
"name": "安順市",
"tags": "ANSHUNSHI 安順市",
"cityid": "520400"
}, {
"name": "阿里地區",
"tags": "ALIDIQU 阿里地區",
"cityid": "542500"
}, {
"name": "安康市",
"tags": "ANKANGSHI 安康市",
"cityid": "610900"
}, {
"name": "阿克蘇地區",
"tags": "AKESUDIQU 阿克蘇地區",
"cityid": "652900"
}, {
"name": "阿勒泰地區",
"tags": "ALETAIDIQU 阿勒泰地區",
"cityid": "654300"
}, {
"name": "澳門特別行政區",
"tags": "AOMENTEBIEXINGZHENGQU 澳門特別行政區",
"cityid": "820000"
}]
}, {
"name": "B",
"cities": [{
"name": "北京市",
"tags": "BEIJINGSHI 北京市",
"cityid": "110000"
}, {
"name": "保定市",
"tags": "BAODINGSHI 保定市",
"cityid": "130600"
}, {
"name": "包頭市",
"tags": "BAOTOUSHI 包頭市",
"cityid": "150200"
}, {
"name": "巴彥淖爾市",
"tags": "BAYANNAOERSHI 巴彥淖爾市",
"cityid": "150800"
}, {
"name": "本溪市",
"tags": "BENXISHI 本溪市",
"cityid": "210500"
}, {
"name": "白山市",
"tags": "BAISHANSHI 白山市",
"cityid": "220600"
}, {
"name": "白城市",
"tags": "BAICHENGSHI 白城市",
"cityid": "220800"
}, {
"name": "蚌埠市",
"tags": "BENGBUSHI 蚌埠市",
"cityid": "340300"
}, {
"name": "亳州市",
"tags": "BOZHOUSHI 亳州市",
"cityid": "341600"
}, {
"name": "濱州市",
"tags": "BINZHOUSHI 濱州市",
"cityid": "371600"
}, {
"name": "北海市",
"tags": "BEIHAISHI 北海市",
"cityid": "450500"
}, {
"name": "百色市",
"tags": "BAISESHI 百色市",
"cityid": "451000"
}, {
"name": "巴中市",
"tags": "BAZHONGSHI 巴中市",
"cityid": "511900"
}, {
"name": "畢節市",
"tags": "BIJIESHI 畢節市",
"cityid": "520500"
}, {
"name": "保山市",
"tags": "BAOSHANSHI 保山市",
"cityid": "530500"
}, {
"name": "寶雞市",
"tags": "BAOJISHI 寶雞市",
"cityid": "610300"
}, {
"name": "白銀市",
"tags": "BAIYINSHI 白銀市",
"cityid": "620400"
}, {
"name": "博爾塔拉蒙古自治州",
"tags": "BOERTALAMENGGUZIZHIZHOU 博爾塔拉蒙古自治州",
"cityid": "652700"
}, {
"name": "巴音郭楞蒙古自治州",
"tags": "BAYINGUOLENGMENGGUZIZHIZHOU 巴音郭楞蒙古自治州",
"cityid": "652800"
}]
}, {
"name": "C",
"cities": [{
"name": "承德市",
"tags": "CHENGDESHI 承德市",
"cityid": "130800"
}, {
"name": "滄州市",
"tags": "CANGZHOUSHI 滄州市",
"cityid": "130900"
}, {
"name": "長治市",
"tags": "CHANGZHISHI 長治市",
"cityid": "140400"
}, {
"name": "赤峯市",
"tags": "CHIFENGSHI 赤峯市",
"cityid": "150400"
}, {
"name": "朝陽市",
"tags": "CHAOYANGSHI 朝陽市",
"cityid": "211300"
}, {
"name": "長春市",
"tags": "CHANGCHUNSHI 長春市",
"cityid": "220100"
}, {
"name": "常州市",
"tags": "CHANGZHOUSHI 常州市",
"cityid": "320400"
}, {
"name": "滁州市",
"tags": "CHUZHOUSHI 滁州市",
"cityid": "341100"
}, {
"name": "池州市",
"tags": "CHIZHOUSHI 池州市",
"cityid": "341700"
}, {
"name": "長沙市",
"tags": "CHANGSHASHI 長沙市",
"cityid": "430100"
}, {
"name": "常德市",
"tags": "CHANGDESHI 常德市",
"cityid": "430700"
}, {
"name": "郴州市",
"tags": "CHENZHOUSHI 郴州市",
"cityid": "431000"
}, {
"name": "潮州市",
"tags": "CHAOZHOUSHI 潮州市",
"cityid": "445100"
}, {
"name": "崇左市",
"tags": "CHONGZUOSHI 崇左市",
"cityid": "451400"
}, {
"name": "重慶市",
"tags": "CHONGQINGSHI 重慶市",
"cityid": "500000"
}, {
"name": "成都市",
"tags": "CHENGDUSHI 成都市",
"cityid": "510100"
}, {
"name": "楚雄彝族自治州",
"tags": "CHUXIONGYIZUZIZHIZHOU 楚雄彝族自治州",
"cityid": "532300"
}, {
"name": "昌都市",
"tags": "CHANGDUSHI 昌都市",
"cityid": "540300"
}, {
"name": "昌吉回族自治州",
"tags": "CHANGJIHUIZUZIZHIZHOU 昌吉回族自治州",
"cityid": "652300"
}]
}, {
"name": "D",
"cities": [{
"name": "大同市",
"tags": "DATONGSHI 大同市",
"cityid": "140200"
}, {
"name": "大連市",
"tags": "DALIANSHI 大連市",
"cityid": "210200"
}, {
"name": "丹東市",
"tags": "DANDONGSHI 丹東市",
"cityid": "210600"
}, {
"name": "大慶市",
"tags": "DAQINGSHI 大慶市",
"cityid": "230600"
}, {
"name": "大興安嶺地區",
"tags": "DAXINGANLINGDIQU 大興安嶺地區",
"cityid": "232700"
}, {
"name": "東營市",
"tags": "DONGYINGSHI 東營市",
"cityid": "370500"
}, {
"name": "德州市",
"tags": "DEZHOUSHI 德州市",
"cityid": "371400"
}, {
"name": "東莞市",
"tags": "DONGGUANSHI 東莞市",
"cityid": "441900"
}, {
"name": "儋州市",
"tags": "DANZHOUSHI 儋州市",
"cityid": "460400"
}, {
"name": "德陽市",
"tags": "DEYANGSHI 德陽市",
"cityid": "510600"
}, {
"name": "達州市",
"tags": "DAZHOUSHI 達州市",
"cityid": "511700"
}, {
"name": "大理白族自治州",
"tags": "DALIBAIZUZIZHIZHOU 大理白族自治州",
"cityid": "532900"
}, {
"name": "德宏傣族景頗族自治州",
"tags": "DEHONGDAIZUJINGPOZUZIZHIZHOU 德宏傣族景頗族自治州",
"cityid": "533100"
}, {
"name": "迪慶藏族自治州",
"tags": "DIQINGZANGZUZIZHIZHOU 迪慶藏族自治州",
"cityid": "533400"
}, {
"name": "定西市",
"tags": "DINGXISHI 定西市",
"cityid": "621100"
}]
}, {
"name": "E",
"cities": [{
"name": "鄂爾多斯市",
"tags": "EERDUOSISHI 鄂爾多斯市",
"cityid": "150600"
}, {
"name": "鄂州市",
"tags": "EZHOUSHI 鄂州市",
"cityid": "420700"
}, {
"name": "恩施土家族苗族自治州",
"tags": "ENSHITUJIAZUMIAOZUZIZHIZHOU 恩施土家族苗族自治州",
"cityid": "422800"
}]
}, {
"name": "F",
"cities": [{
"name": "撫順市",
"tags": "FUSHUNSHI 撫順市",
"cityid": "210400"
}, {
"name": "阜新市",
"tags": "FUXINSHI 阜新市",
"cityid": "210900"
}, {
"name": "阜陽市",
"tags": "FUYANGSHI 阜陽市",
"cityid": "341200"
}, {
"name": "福州市",
"tags": "FUZHOUSHI 福州市",
"cityid": "350100"
}, {
"name": "撫州市",
"tags": "FUZHOUSHI 撫州市",
"cityid": "361000"
}, {
"name": "佛山市",
"tags": "FOSHANSHI 佛山市",
"cityid": "440600"
}, {
"name": "防城港市",
"tags": "FANGCHENGGANGSHI 防城港市",
"cityid": "450600"
}]
}, {
"name": "G",
"cities": [{
"name": "贛州市",
"tags": "GANZHOUSHI 贛州市",
"cityid": "360700"
}, {
"name": "廣州市",
"tags": "GUANGZHOUSHI 廣州市",
"cityid": "440100"
}, {
"name": "桂林市",
"tags": "GUILINSHI 桂林市",
"cityid": "450300"
}, {
"name": "貴港市",
"tags": "GUIGANGSHI 貴港市",
"cityid": "450800"
}, {
"name": "廣元市",
"tags": "GUANGYUANSHI 廣元市",
"cityid": "510800"
}, {
"name": "廣安市",
"tags": "GUANGANSHI 廣安市",
"cityid": "511600"
}, {
"name": "甘孜藏族自治州",
"tags": "GANZIZANGZUZIZHIZHOU 甘孜藏族自治州",
"cityid": "513300"
}, {
"name": "貴陽市",
"tags": "GUIYANGSHI 貴陽市",
"cityid": "520100"
}, {
"name": "甘南藏族自治州",
"tags": "GANNANZANGZUZIZHIZHOU 甘南藏族自治州",
"cityid": "623000"
}, {
"name": "果洛藏族自治州",
"tags": "GUOLUOZANGZUZIZHIZHOU 果洛藏族自治州",
"cityid": "632600"
}, {
"name": "固原市",
"tags": "GUYUANSHI 固原市",
"cityid": "640400"
}]
}, {
"name": "H",
"cities": [{
"name": "邯鄲市",
"tags": "HANDANSHI 邯鄲市",
"cityid": "130400"
}, {
"name": "衡水市",
"tags": "HENGSHUISHI 衡水市",
"cityid": "131100"
}, {
"name": "呼和浩特市",
"tags": "HUHEHAOTESHI 呼和浩特市",
"cityid": "150100"
}, {
"name": "呼倫貝爾市",
"tags": "HULUNBEIERSHI 呼倫貝爾市",
"cityid": "150700"
}, {
"name": "葫蘆島市",
"tags": "HULUDAOSHI 葫蘆島市",
"cityid": "211400"
}, {
"name": "哈爾濱市",
"tags": "HAERBINSHI 哈爾濱市",
"cityid": "230100"
}, {
"name": "鶴崗市",
"tags": "HEGANGSHI 鶴崗市",
"cityid": "230400"
}, {
"name": "黑河市",
"tags": "HEIHESHI 黑河市",
"cityid": "231100"
}, {
"name": "淮安市",
"tags": "HUAIANSHI 淮安市",
"cityid": "320800"
}, {
"name": "杭州市",
"tags": "HANGZHOUSHI 杭州市",
"cityid": "330100"
}, {
"name": "湖州市",
"tags": "HUZHOUSHI 湖州市",
"cityid": "330500"
}, {
"name": "合肥市",
"tags": "HEFEISHI 合肥市",
"cityid": "340100"
}, {
"name": "淮南市",
"tags": "HUAINANSHI 淮南市",
"cityid": "340400"
}, {
"name": "淮北市",
"tags": "HUAIBEISHI 淮北市",
"cityid": "340600"
}, {
"name": "黃山市",
"tags": "HUANGSHANSHI 黃山市",
"cityid": "341000"
}, {
"name": "菏澤市",
"tags": "HEZESHI 菏澤市",
"cityid": "371700"
}, {
"name": "鶴壁市",
"tags": "HEBISHI 鶴壁市",
"cityid": "410600"
}, {
"name": "黃石市",
"tags": "HUANGSHISHI 黃石市",
"cityid": "420200"
}, {
"name": "黃岡市",
"tags": "HUANGGANGSHI 黃岡市",
"cityid": "421100"
}, {
"name": "衡陽市",
"tags": "HENGYANGSHI 衡陽市",
"cityid": "430400"
}, {
"name": "懷化市",
"tags": "HUAIHUASHI 懷化市",
"cityid": "431200"
}, {
"name": "惠州市",
"tags": "HUIZHOUSHI 惠州市",
"cityid": "441300"
}, {
"name": "河源市",
"tags": "HEYUANSHI 河源市",
"cityid": "441600"
}, {
"name": "賀州市",
"tags": "HEZHOUSHI 賀州市",
"cityid": "451100"
}, {
"name": "河池市",
"tags": "HECHISHI 河池市",
"cityid": "451200"
}, {
"name": "海口市",
"tags": "HAIKOUSHI 海口市",
"cityid": "460100"
}, {
"name": "紅河哈尼族彝族自治州",
"tags": "HONGHEHANIZUYIZUZIZHIZHOU 紅河哈尼族彝族自治州",
"cityid": "532500"
}, {
"name": "漢中市",
"tags": "HANZHONGSHI 漢中市",
"cityid": "610700"
}, {
"name": "海東市",
"tags": "HAIDONGSHI 海東市",
"cityid": "630200"
}, {
"name": "海北藏族自治州",
"tags": "HAIBEIZANGZUZIZHIZHOU 海北藏族自治州",
"cityid": "632200"
}, {
"name": "黃南藏族自治州",
"tags": "HUANGNANZANGZUZIZHIZHOU 黃南藏族自治州",
"cityid": "632300"
}, {
"name": "海南藏族自治州",
"tags": "HAINANZANGZUZIZHIZHOU 海南藏族自治州",
"cityid": "632500"
}, {
"name": "海西蒙古族藏族自治州",
"tags": "HAIXIMENGGUZUZANGZUZIZHIZHOU 海西蒙古族藏族自治州",
"cityid": "632800"
}, {
"name": "哈密市",
"tags": "HAMISHI 哈密市",
"cityid": "650500"
}, {
"name": "和田地區",
"tags": "HETIANDIQU 和田地區",
"cityid": "653200"
}]
}, {
"name": "J",
"cities": [{
"name": "晉城市",
"tags": "JINCHENGSHI 晉城市",
"cityid": "140500"
}, {
"name": "晉中市",
"tags": "JINZHONGSHI 晉中市",
"cityid": "140700"
}, {
"name": "錦州市",
"tags": "JINZHOUSHI 錦州市",
"cityid": "210700"
}, {
"name": "吉林市",
"tags": "JILINSHI 吉林市",
"cityid": "220200"
}, {
"name": "雞西市",
"tags": "JIXISHI 雞西市",
"cityid": "230300"
}, {
"name": "佳木斯市",
"tags": "JIAMUSISHI 佳木斯市",
"cityid": "230800"
}, {
"name": "嘉興市",
"tags": "JIAXINGSHI 嘉興市",
"cityid": "330400"
}, {
"name": "金華市",
"tags": "JINHUASHI 金華市",
"cityid": "330700"
}, {
"name": "景德鎮市",
"tags": "JINGDEZHENSHI 景德鎮市",
"cityid": "360200"
}, {
"name": "九江市",
"tags": "JIUJIANGSHI 九江市",
"cityid": "360400"
}, {
"name": "吉安市",
"tags": "JIANSHI 吉安市",
"cityid": "360800"
}, {
"name": "濟南市",
"tags": "JINANSHI 濟南市",
"cityid": "370100"
}, {
"name": "濟寧市",
"tags": "JININGSHI 濟寧市",
"cityid": "370800"
}, {
"name": "焦作市",
"tags": "JIAOZUOZUOZUOSHI 焦作市",
"cityid": "410800"
}, {
"name": "荊門市",
"tags": "JINGMENSHI 荊門市",
"cityid": "420800"
}, {
"name": "荊州市",
"tags": "JINGZHOUSHI 荊州市",
"cityid": "421000"
}, {
"name": "江門市",
"tags": "JIANGMENSHI 江門市",
"cityid": "440700"
}, {
"name": "揭陽市",
"tags": "JIEYANGSHI 揭陽市",
"cityid": "445200"
}, {
"name": "嘉峪關市",
"tags": "JIAYUGUANSHI 嘉峪關市",
"cityid": "620200"
}, {
"name": "金昌市",
"tags": "JINCHANGSHI 金昌市",
"cityid": "620300"
}, {
"name": "酒泉市",
"tags": "JIUQUANSHI 酒泉市",
"cityid": "620900"
}]
}, {
"name": "K",
"cities": [{
"name": "開封市",
"tags": "KAIFENGSHI 開封市",
"cityid": "410200"
}, {
"name": "昆明市",
"tags": "KUNMINGSHI 昆明市",
"cityid": "530100"
}, {
"name": "克拉瑪依市",
"tags": "KELAMAYISHI 克拉瑪依市",
"cityid": "650200"
}, {
"name": "克孜勒蘇柯爾克孜自治州",
"tags": "KEZILESUKEERKEZIZIZHIZHOU 克孜勒蘇柯爾克孜自治州",
"cityid": "653000"
}, {
"name": "喀什地區",
"tags": "KASHIDIQU 喀什地區",
"cityid": "653100"
}]
}, {
"name": "L",
"cities": [{
"name": "廊坊市",
"tags": "LANGFANGSHI 廊坊市",
"cityid": "131000"
}, {
"name": "臨汾市",
"tags": "LINFENSHI 臨汾市",
"cityid": "141000"
}, {
"name": "呂梁市",
"tags": "LVLIANGSHI 呂梁市",
"cityid": "141100"
}, {
"name": "遼陽市",
"tags": "LIAOYANGSHI 遼陽市",
"cityid": "211000"
}, {
"name": "遼源市",
"tags": "LIAOYUANSHI 遼源市",
"cityid": "220400"
}, {
"name": "連雲港市",
"tags": "LIANYUNGANGSHI 連雲港市",
"cityid": "320700"
}, {
"name": "麗水市",
"tags": "LISHUISHI 麗水市",
"cityid": "331100"
}, {
"name": "六安市",
"tags": "LIUANSHI 六安市",
"cityid": "341500"
}, {
"name": "龍巖市",
"tags": "LONGYANSHI 龍巖市",
"cityid": "350800"
}, {
"name": "臨沂市",
"tags": "LINYISHI 臨沂市",
"cityid": "371300"
}, {
"name": "聊城市",
"tags": "LIAOCHENGSHI 聊城市",
"cityid": "371500"
}, {
"name": "洛陽市",
"tags": "LUOYANGSHI 洛陽市",
"cityid": "410300"
}, {
"name": "漯河市",
"tags": "LUOHESHI 漯河市",
"cityid": "411100"
}, {
"name": "婁底市",
"tags": "LOUDISHI 婁底市",
"cityid": "431300"
}, {
"name": "柳州市",
"tags": "LIUZHOUSHI 柳州市",
"cityid": "450200"
}, {
"name": "來賓市",
"tags": "LAIBINSHI 來賓市",
"cityid": "451300"
}, {
"name": "瀘州市",
"tags": "LUZHOUSHI 瀘州市",
"cityid": "510500"
}, {
"name": "樂山市",
"tags": "LESHANSHI 樂山市",
"cityid": "511100"
}, {
"name": "涼山彝族自治州",
"tags": "LIANGSHANYIZUZIZHIZHOU 涼山彝族自治州",
"cityid": "513400"
}, {
"name": "六盤水市",
"tags": "LIUPANSHUISHI 六盤水市",
"cityid": "520200"
}, {
"name": "麗江市",
"tags": "LIJIANGSHI 麗江市",
"cityid": "530700"
}, {
"name": "臨滄市",
"tags": "LINCANGSHI 臨滄市",
"cityid": "530900"
}, {
"name": "拉薩市",
"tags": "LASASHI 拉薩市",
"cityid": "540100"
}, {
"name": "林芝市",
"tags": "LINZHISHI 林芝市",
"cityid": "540400"
}, {
"name": "蘭州市",
"tags": "LANZHOUSHI 蘭州市",
"cityid": "620100"
}, {
"name": "隴南市",
"tags": "LONGNANSHI 隴南市",
"cityid": "621200"
}, {
"name": "臨夏回族自治州",
"tags": "LINXIAHUIZUZIZHIZHOU 臨夏回族自治州",
"cityid": "622900"
}]
}, {
"name": "M",
"cities": [{
"name": "牡丹江市",
"tags": "MUDANJIANGSHI 牡丹江市",
"cityid": "231000"
}, {
"name": "馬鞍山市",
"tags": "MAANSHANSHI 馬鞍山市",
"cityid": "340500"
}, {
"name": "茂名市",
"tags": "MAOMINGSHI 茂名市",
"cityid": "440900"
}, {
"name": "梅州市",
"tags": "MEIZHOUSHI 梅州市",
"cityid": "441400"
}, {
"name": "綿陽市",
"tags": "MIANYANGSHI 綿陽市",
"cityid": "510700"
}, {
"name": "眉山市",
"tags": "MEISHANSHI 眉山市",
"cityid": "511400"
}]
}, {
"name": "N",
"cities": [{
"name": "南京市",
"tags": "NANJINGSHI 南京市",
"cityid": "320100"
}, {
"name": "南通市",
"tags": "NANTONGSHI 南通市",
"cityid": "320600"
}, {
"name": "寧波市",
"tags": "NINGBOSHI 寧波市",
"cityid": "330200"
}, {
"name": "南平市",
"tags": "NANPINGSHI 南平市",
"cityid": "350700"
}, {
"name": "寧德市",
"tags": "NINGDESHI 寧德市",
"cityid": "350900"
}, {
"name": "南昌市",
"tags": "NANCHANGSHI 南昌市",
"cityid": "360100"
}, {
"name": "南陽市",
"tags": "NANYANGSHI 南陽市",
"cityid": "411300"
}, {
"name": "南寧市",
"tags": "NANNINGSHI 南寧市",
"cityid": "450100"
}, {
"name": "內江市",
"tags": "NEIJIANGSHI 內江市",
"cityid": "511000"
}, {
"name": "南充市",
"tags": "NANCHONGSHI 南充市",
"cityid": "511300"
}, {
"name": "怒江傈僳族自治州",
"tags": "NUJIANGLISUZUZIZHIZHOU 怒江傈僳族自治州",
"cityid": "533300"
}, {
"name": "那曲市",
"tags": "NAQUSHI 那曲市",
"cityid": "540600"
}]
}, {
"name": "P",
"cities": [{
"name": "盤錦市",
"tags": "PANJINSHI 盤錦市",
"cityid": "211100"
}, {
"name": "莆田市",
"tags": "PUTIANSHI 莆田市",
"cityid": "350300"
}, {
"name": "萍鄉市",
"tags": "PINGXIANGSHI 萍鄉市",
"cityid": "360300"
}, {
"name": "平頂山市",
"tags": "PINGDINGSHANSHI 平頂山市",
"cityid": "410400"
}, {
"name": "濮陽市",
"tags": "PUYANGSHI 濮陽市",
"cityid": "410900"
}, {
"name": "攀枝花市",
"tags": "PANZHIHUASHI 攀枝花市",
"cityid": "510400"
}, {
"name": "普洱市",
"tags": "PUERSHI 普洱市",
"cityid": "530800"
}, {
"name": "平涼市",
"tags": "PINGLIANGSHI 平涼市",
"cityid": "620800"
}]
}, {
"name": "Q",
"cities": [{
"name": "秦皇島市",
"tags": "QINHUANGDAOSHI 秦皇島市",
"cityid": "130300"
}, {
"name": "齊齊哈爾市",
"tags": "QIQIHAERSHI 齊齊哈爾市",
"cityid": "230200"
}, {
"name": "七臺河市",
"tags": "QITAIHESHI 七臺河市",
"cityid": "230900"
}, {
"name": "衢州市",
"tags": "QUZHOUSHI 衢州市",
"cityid": "330800"
}, {
"name": "泉州市",
"tags": "QUANZHOUSHI 泉州市",
"cityid": "350500"
}, {
"name": "青島市",
"tags": "QINGDAOSHI 青島市",
"cityid": "370200"
}, {
"name": "清遠市",
"tags": "QINGYUANSHI 清遠市",
"cityid": "441800"
}, {
"name": "欽州市",
"tags": "QINZHOUSHI 欽州市",
"cityid": "450700"
}, {
"name": "黔西南布依族苗族自治州",
"tags": "QIANXINANBUYIZUMIAOZUZIZHIZHOU 黔西南布依族苗族自治州",
"cityid": "522300"
}, {
"name": "黔東南苗族侗族自治州",
"tags": "QIANDONGNANMIAOZUDONGZUZIZHIZHOU 黔東南苗族侗族自治州",
"cityid": "522600"
}, {
"name": "黔南布依族苗族自治州",
"tags": "QIANNANBUYIZUMIAOZUZIZHIZHOU 黔南布依族苗族自治州",
"cityid": "522700"
}, {
"name": "曲靖市",
"tags": "QUJINGSHI 曲靖市",
"cityid": "530300"
}, {
"name": "慶陽市",
"tags": "QINGYANGSHI 慶陽市",
"cityid": "621000"
}]
}, {
"name": "R",
"cities": [{
"name": "日照市",
"tags": "RIZHAOSHI 日照市",
"cityid": "371100"
}, {
"name": "日喀則市",
"tags": "RIKAZESHI 日喀則市",
"cityid": "540200"
}]
}, {
"name": "S",
"cities": [{
"name": "石家莊市",
"tags": "SHIJIAZHUANGSHI 石家莊市",
"cityid": "130100"
}, {
"name": "朔州市",
"tags": "SHUOZHOUSHI 朔州市",
"cityid": "140600"
}, {
"name": "瀋陽市",
"tags": "SHENYANGSHI 瀋陽市",
"cityid": "210100"
}, {
"name": "四平市",
"tags": "SIPINGSHI 四平市",
"cityid": "220300"
}, {
"name": "松原市",
"tags": "SONGYUANSHI 松原市",
"cityid": "220700"
}, {
"name": "雙鴨山市",
"tags": "SHUANGYASHANSHI 雙鴨山市",
"cityid": "230500"
}, {
"name": "綏化市",
"tags": "SUIHUASHI 綏化市",
"cityid": "231200"
}, {
"name": "上海市",
"tags": "SHANGHAISHI 上海市",
"cityid": "310000"
}, {
"name": "蘇州市",
"tags": "SUZHOUSHI 蘇州市",
"cityid": "320500"
}, {
"name": "宿遷市",
"tags": "SUQIANSHI 宿遷市",
"cityid": "321300"
}, {
"name": "紹興市",
"tags": "SHAOXINGSHI 紹興市",
"cityid": "330600"
}, {
"name": "宿州市",
"tags": "SUZHOUSHI 宿州市",
"cityid": "341300"
}, {
"name": "三明市",
"tags": "SANMINGSHI 三明市",
"cityid": "350400"
}, {
"name": "上饒市",
"tags": "SHANGRAOSHI 上饒市",
"cityid": "361100"
}, {
"name": "三門峽市",
"tags": "SANMENXIASHI 三門峽市",
"cityid": "411200"
}, {
"name": "商丘市",
"tags": "SHANGQIUSHI 商丘市",
"cityid": "411400"
}, {
"name": "十堰市",
"tags": "SHIYANSHI 十堰市",
"cityid": "420300"
}, {
"name": "隨州市",
"tags": "SUIZHOUSHI 隨州市",
"cityid": "421300"
}, {
"name": "邵陽市",
"tags": "SHAOYANGSHI 邵陽市",
"cityid": "430500"
}, {
"name": "韶關市",
"tags": "SHAOGUANSHI 韶關市",
"cityid": "440200"
}, {
"name": "深圳市",
"tags": "SHENZHENSHI 深圳市",
"cityid": "440300"
}, {
"name": "汕頭市",
"tags": "SHANTOUSHI 汕頭市",
"cityid": "440500"
}, {
"name": "汕尾市",
"tags": "SHANWEISHI 汕尾市",
"cityid": "441500"
}, {
"name": "三亞市",
"tags": "SANYASHI 三亞市",
"cityid": "460200"
}, {
"name": "三沙市",
"tags": "SANSHASHI 三沙市",
"cityid": "460300"
}, {
"name": "遂寧市",
"tags": "SUININGSHI 遂寧市",
"cityid": "510900"
}, {
"name": "山南市",
"tags": "SHANNANSHI 山南市",
"cityid": "540500"
}, {
"name": "商洛市",
"tags": "SHANGLUOSHI 商洛市",
"cityid": "611000"
}, {
"name": "石嘴山市",
"tags": "SHIZUISHANSHI 石嘴山市",
"cityid": "640200"
}]
}, {
"name": "T",
"cities": [{
"name": "天津市",
"tags": "TIANJINSHI 天津市",
"cityid": "120000"
}, {
"name": "唐山市",
"tags": "TANGSHANSHI 唐山市",
"cityid": "130200"
}, {
"name": "太原市",
"tags": "TAIYUANSHI 太原市",
"cityid": "140100"
}, {
"name": "通遼市",
"tags": "TONGLIAOSHI 通遼市",
"cityid": "150500"
}, {
"name": "鐵嶺市",
"tags": "TIELINGSHI 鐵嶺市",
"cityid": "211200"
}, {
"name": "通化市",
"tags": "TONGHUASHI 通化市",
"cityid": "220500"
}, {
"name": "泰州市",
"tags": "TAIZHOUSHI 泰州市",
"cityid": "321200"
}, {
"name": "台州市",
"tags": "TAIZHOUSHI 台州市",
"cityid": "331000"
}, {
"name": "銅陵市",
"tags": "TONGLINGSHI 銅陵市",
"cityid": "340700"
}, {
"name": "泰安市",
"tags": "TAIANSHI 泰安市",
"cityid": "370900"
}, {
"name": "銅仁市",
"tags": "TONGRENSHI 銅仁市",
"cityid": "520600"
}, {
"name": "銅川市",
"tags": "TONGCHUANSHI 銅川市",
"cityid": "610200"
}, {
"name": "天水市",
"tags": "TIANSHUISHI 天水市",
"cityid": "620500"
}, {
"name": "吐魯番市",
"tags": "TULUFANSHI 吐魯番市",
"cityid": "650400"
}, {
"name": "塔城地區",
"tags": "TACHENGDIQU 塔城地區",
"cityid": "654200"
}, {
"name": "臺灣省",
"tags": "TAIWANSHENG 臺灣省",
"cityid": "710000"
}]
}, {
"name": "W",
"cities": [{
"name": "烏海市",
"tags": "WUHAISHI 烏海市",
"cityid": "150300"
}, {
"name": "烏蘭察布市",
"tags": "WULANCHABUSHI 烏蘭察布市",
"cityid": "150900"
}, {
"name": "無錫市",
"tags": "WUXISHI 無錫市",
"cityid": "320200"
}, {
"name": "溫州市",
"tags": "WENZHOUSHI 溫州市",
"cityid": "330300"
}, {
"name": "蕪湖市",
"tags": "WUHUSHI 蕪湖市",
"cityid": "340200"
}, {
"name": "濰坊市",
"tags": "WEIFANGSHI 濰坊市",
"cityid": "370700"
}, {
"name": "威海市",
"tags": "WEIHAISHI 威海市",
"cityid": "371000"
}, {
"name": "武漢市",
"tags": "WUHANSHI 武漢市",
"cityid": "420100"
}, {
"name": "梧州市",
"tags": "WUZHOUSHI 梧州市",
"cityid": "450400"
}, {
"name": "文山壯族苗族自治州",
"tags": "WENSHANZHUANGZUMIAOZUZIZHIZHOU 文山壯族苗族自治州",
"cityid": "532600"
}, {
"name": "渭南市",
"tags": "WEINANSHI 渭南市",
"cityid": "610500"
}, {
"name": "武威市",
"tags": "WUWEISHI 武威市",
"cityid": "620600"
}, {
"name": "吳忠市",
"tags": "WUZHONGSHI 吳忠市",
"cityid": "640300"
}, {
"name": "烏魯木齊市",
"tags": "WULUMUQISHI 烏魯木齊市",
"cityid": "650100"
}]
}, {
"name": "X",
"cities": [{
"name": "邢臺市",
"tags": "XINGTAISHI 邢臺市",
"cityid": "130500"
}, {
"name": "忻州市",
"tags": "XINZHOUSHI 忻州市",
"cityid": "140900"
}, {
"name": "興安盟",
"tags": "XINGANMENG 興安盟",
"cityid": "152200"
}, {
"name": "錫林郭勒盟",
"tags": "XILINGUOLEMENG 錫林郭勒盟",
"cityid": "152500"
}, {
"name": "徐州市",
"tags": "XUZHOUSHI 徐州市",
"cityid": "320300"
}, {
"name": "宣城市",
"tags": "XUANCHENGSHI 宣城市",
"cityid": "341800"
}, {
"name": "廈門市",
"tags": "XIAMENSHI 廈門市",
"cityid": "350200"
}, {
"name": "新餘市",
"tags": "XINYUSHI 新餘市",
"cityid": "360500"
}, {
"name": "新鄉市",
"tags": "XINXIANGSHI 新鄉市",
"cityid": "410700"
}, {
"name": "許昌市",
"tags": "XUCHANGSHI 許昌市",
"cityid": "411000"
}, {
"name": "信陽市",
"tags": "XINYANGSHI 信陽市",
"cityid": "411500"
}, {
"name": "襄陽市",
"tags": "XIANGYANGSHI 襄陽市",
"cityid": "420600"
}, {
"name": "孝感市",
"tags": "XIAOGANSHI 孝感市",
"cityid": "420900"
}, {
"name": "咸寧市",
"tags": "XIANNINGSHI 咸寧市",
"cityid": "421200"
}, {
"name": "湘潭市",
"tags": "XIANGTANSHI 湘潭市",
"cityid": "430300"
}, {
"name": "湘西土家族苗族自治州",
"tags": "XIANGXITUJIAZUMIAOZUZIZHIZHOU 湘西土家族苗族自治州",
"cityid": "433100"
}, {
"name": "西雙版納傣族自治州",
"tags": "XISHUANGBANNADAIZUZIZHIZHOU 西雙版納傣族自治州",
"cityid": "532800"
}, {
"name": "西安市",
"tags": "XIANSHI 西安市",
"cityid": "610100"
}, {
"name": "咸陽市",
"tags": "XIANYANGSHI 咸陽市",
"cityid": "610400"
}, {
"name": "西寧市",
"tags": "XININGSHI 西寧市",
"cityid": "630100"
}, {
"name": "香港特別行政區",
"tags": "XIANGGANGTEBIEXINGZHENGQU 香港特別行政區",
"cityid": "810000"
}]
}, {
"name": "Y",
"cities": [{
"name": "陽泉市",
"tags": "YANGQUANSHI 陽泉市",
"cityid": "140300"
}, {
"name": "運城市",
"tags": "YUNCHENGSHI 運城市",
"cityid": "140800"
}, {
"name": "營口市",
"tags": "YINGKOUSHI 營口市",
"cityid": "210800"
}, {
"name": "延邊朝鮮族自治州",
"tags": "YANBIANCHAOXIANZIZHIZHOU 延邊朝鮮族自治州",
"cityid": "222400"
}, {
"name": "伊春市",
"tags": "YICHUNSHI 伊春市",
"cityid": "230700"
}, {
"name": "鹽城市",
"tags": "YANCHENGSHI 鹽城市",
"cityid": "320900"
}, {
"name": "揚州市",
"tags": "YANGZHOUSHI 揚州市",
"cityid": "321000"
}, {
"name": "鷹潭市",
"tags": "YINGTANSHI 鷹潭市",
"cityid": "360600"
}, {
"name": "宜春市",
"tags": "YICHUNSHI 宜春市",
"cityid": "360900"
}, {
"name": "煙臺市",
"tags": "YANTAISHI 煙臺市",
"cityid": "370600"
}, {
"name": "宜昌市",
"tags": "YICHANGSHI 宜昌市",
"cityid": "420500"
}, {
"name": "岳陽市",
"tags": "YUEYANGSHI 岳陽市",
"cityid": "430600"
}, {
"name": "益陽市",
"tags": "YIYANGSHI 益陽市",
"cityid": "430900"
}, {
"name": "永州市",
"tags": "YONGZHOUSHI 永州市",
"cityid": "431100"
}, {
"name": "陽江市",
"tags": "YANGJIANGSHI 陽江市",
"cityid": "441700"
}, {
"name": "雲浮市",
"tags": "YUNFUSHI 雲浮市",
"cityid": "445300"
}, {
"name": "玉林市",
"tags": "YULINSHI 玉林市",
"cityid": "450900"
}, {
"name": "宜賓市",
"tags": "YIBINSHI 宜賓市",
"cityid": "511500"
}, {
"name": "雅安市",
"tags": "YAANSHI 雅安市",
"cityid": "511800"
}, {
"name": "玉溪市",
"tags": "YUXIQISHI 玉溪市",
"cityid": "530400"
}, {
"name": "延安市",
"tags": "YANANSHI 延安市",
"cityid": "610600"
}, {
"name": "榆林市",
"tags": "YULINSHI 榆林市",
"cityid": "610800"
}, {
"name": "玉樹藏族自治州",
"tags": "YUSHUZANGZUZIZHIZHOU 玉樹藏族自治州",
"cityid": "632700"
}, {
"name": "銀川市",
"tags": "YINCHUANSHI 銀川市",
"cityid": "640100"
}, {
"name": "伊犁哈薩克自治州",
"tags": "YILIHASAKEZIZHIZHOU 伊犁哈薩克自治州",
"cityid": "654000"
}]
}, {
"name": "Z",
"cities": [{
"name": "張家口市",
"tags": "ZHANGJIAKOUSHI 張家口市",
"cityid": "130700"
}, {
"name": "鎮江市",
"tags": "ZHENJIANGSHI 鎮江市",
"cityid": "321100"
}, {
"name": "舟山市",
"tags": "ZHOUSHANSHI 舟山市",
"cityid": "330900"
}, {
"name": "漳州市",
"tags": "ZHANGZHOUSHI 漳州市",
"cityid": "350600"
}, {
"name": "淄博市",
"tags": "ZIBOSHI 淄博市",
"cityid": "370300"
}, {
"name": "棗莊市",
"tags": "ZAOZHUANGSHI 棗莊市",
"cityid": "370400"
}, {
"name": "鄭州市",
"tags": "ZHENGZHOUSHI 鄭州市",
"cityid": "410100"
}, {
"name": "周口市",
"tags": "ZHOUKOUSHI 周口市",
"cityid": "411600"
}, {
"name": "駐馬店市",
"tags": "ZHUMADIANSHI 駐馬店市",
"cityid": "411700"
}, {
"name": "株洲市",
"tags": "ZHUZHOUSHI 株洲市",
"cityid": "430200"
}, {
"name": "張家界市",
"tags": "ZHANGJIAJIESHI 張家界市",
"cityid": "430800"
}, {
"name": "珠海市",
"tags": "ZHUHAISHI 珠海市",
"cityid": "440400"
}, {
"name": "湛江市",
"tags": "ZHANJIANGSHI 湛江市",
"cityid": "440800"
}, {
"name": "肇慶市",
"tags": "ZHAOQINGSHI 肇慶市",
"cityid": "441200"
}, {
"name": "中山市",
"tags": "ZHONGSHANSHI 中山市",
"cityid": "442000"
}, {
"name": "自貢市",
"tags": "ZIGONGSHI 自貢市",
"cityid": "510300"
}, {
"name": "資陽市",
"tags": "ZIYANGSHI 資陽市",
"cityid": "512000"
}, {
"name": "遵義市",
"tags": "ZUNYISHI 遵義市",
"cityid": "520300"
}, {
"name": "昭通市",
"tags": "ZHAOTONGSHI 昭通市",
"cityid": "530600"
}, {
"name": "張掖市",
"tags": "ZHANGYESHI 張掖市",
"cityid": "620700"
}, {
"name": "中衛市",
"tags": "ZHONGWEISHI 中衛市",
"cityid": "640500"
}]
}]