最近遇到了一個(gè)新的需求，就是在項(xiàng)目中添加城市選擇椒丧，小程序的城市選擇也不是什么難點(diǎn)壹甥，網(wǎng)上也有很多的demo，主要是數(shù)據(jù)格式的不同壶熏，總結(jié)了一下句柠，基本上屬于兩種結(jié)構(gòu)。大部分demo都是引入所有的城市棒假，大家在選擇測(cè)試的時(shí)候可能覺(jué)得并不方便溯职，所有我把數(shù)據(jù)抽取了部分出來(lái)，大家嘗試后可以再對(duì)所有城市的數(shù)據(jù)進(jìn)行封裝帽哑，在網(wǎng)絡(luò)上搜索的話基本上分為兩種數(shù)據(jù)格式谜酒，多數(shù)如下第一種所示，第二種是根據(jù)接口需要更改的格式妻枕，同時(shí)前端也會(huì)使用兩種不同的數(shù)據(jù)格式去渲染僻族。

• 第一種

 citys: [
    {
      "A": [
        {
          "name": "阿壩",
          "key": "A"
        },
        {
          "name": "阿拉善",
          "key": "A"
        },
      ],
      "B": [
        {
          "name": "北京",
          "key": "B"
        },
        {
          "name": "白銀",
          "key": "B"
        },
      ],
      "C": [
        {
          "name": "重慶",
          "key": "C"
        },
        {
          "name": "成都",
          "key": "C"
        },
   ]

• 實(shí)現(xiàn)效果

城市選擇1.gif

• WXML

<scroll-view scroll-y="true" style="height: {{winHeight}}px;" scroll-into-view="{{scrollTopId}}" class="city_list">
  <block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName" wx:key="{{idx}}">
    <text id="{{idx}}" class="list_tit">{{idx}}</text>
    <block wx:for="{{cityName}}">
      <view class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}}</view>
    </block>
  </block>
</scroll-view>
<!--城市選擇列表-->
<view class="scroll_list" bindtouchstart="chStart" bindtouchend="chEnd" 
style="background: rgba(0,0,0,{{trans}});">
 <view class="right-title">歷史</view>
 <view class="right-title">熱門</view>
  <block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName" wx:key="{{idx}}">
      <view id="{{idx}}" class="scroll_list_chi" style="line-height:{{lineHeight}}px ; height:{{lineHeight}}px ;font-size:24rpx;" bindtouchstart="getWords" bindtouchend="setWords">{{idx}}</view>
  </block>
</view>

<!--選擇顯示-->
<view hidden="{{hidden}}" class="showwords">
  {{showwords}}
</view>

• WXSS

/*城市列表*/
.city_list {
    position: relative;
}

/*城市選擇頭部*/
.list_tit {
    display: block;
    line-height: 40px;
    height: 40px;
    padding-left: 15px;
    font-size: 16ppx;
    background: #f5f5f5;
    color: #666;
}
.list_item {
    height: 40px;
    /*border-top: 1px #f5f5f5 solid ;*/
    line-height: 40px;
    font-size: 16px;
    padding-left: 15px;
}
.list_item::before {
    content: " ";
    height: 1px;
    border-top: 1px #f5f5f5 solid;
    position: absolute;
    width: 100%;
}
.list_item::before:nth-child(1) {
    border: none;
}
/*城市選擇 右邊*/
.scroll_list {
    background: rgba(0,0,0,0);
    position: absolute;
    width: 46rpx;
    top: 100rpx;
    right: 10px;
}
.scroll_list_chi {
    text-align: center;
    font-size: 22rpx;
    color: rgb(99, 99, 99)
}
.right-title{
  font-size:24rpx;
  width:80rpx;
}
/*顯示框*/
.showwords {
    width: 80px;
    height: 80px;
    background: rgba(0,0,0,.3);
    border-radius:50%;
    line-height: 80px;
    text-align: center;
    font-size:10vw;
    margin: auto;
    position: absolute;
    top: 0;left: 0;bottom: 0;right: 0;
    z-index: 999;   
}

• JS

city1封裝的數(shù)據(jù)我會(huì)放在頁(yè)面的最下方

//先引用城市數(shù)據(jù)文件
var city = require('../../utils/city1.js')
var lineHeight = 0;
var endWords = "";
var isNum;
Page({
  data: {
    "hidden": true,
    cityName: "", //獲取選中的城市名
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function(options) {
  },
/**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
 */
  onReady: function() {
    //初始化封裝的城市數(shù)據(jù)
    var cityChild = city.City[0];
    console.log(cityChild)
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        //lineHeight是右側(cè)A B C D的行高，這個(gè)可以根據(jù)需要自行設(shè)置屡谐，我在第二個(gè)demo中重新設(shè)置
        lineHeight = (res.windowHeight - 100) / 22;
        console.log(res.windowHeight - 100)
        that.setData({
          city: cityChild,
          winHeight: res.windowHeight-2,
          lineHeight: lineHeight
        })
      }
    })
  },

  //觸發(fā)全部開(kāi)始選擇
  chStart: function() {
    console.log('觸發(fā)全部開(kāi)始選擇')
    //trans是代表右側(cè)字母列表背景的透明度述么，在演示中可以看到效果，
    //點(diǎn)擊右側(cè)列表時(shí)呈現(xiàn)灰色背景愕掏，點(diǎn)擊結(jié)束后透明度為0,同時(shí)顯示頁(yè)面最下面定義的showWords的顯示
    this.setData({
      trans: ".3",
      hidden: false
    })
  },
  //觸發(fā)結(jié)束選擇
  chEnd: function() {
    console.log('觸發(fā)結(jié)束選擇')
    this.setData({
      trans: "0",
      hidden: true,
      scrollTopId: this.endWords
    })
  },
  //獲取文字信息
  getWords: function(e) {
    console.log('獲取文字信息')
    var id = e.target.id;
    this.endWords = id;
    isNum = id;
    this.setData({
      showwords: this.endWords
    })
  },
  //設(shè)置文字信息
  setWords: function(e) {
    console.log('設(shè)置文字信息')
    var id = e.target.id;
    this.setData({
      scrollTopId: id
    })
  },
  //選擇城市度秘，并讓選中的值顯示在文本框里
  bindCity: function(e) {
    console.log(e.currentTarget.dataset.city);
    var cityName = e.currentTarget.dataset.city;
    wx.showToast({
      title: '您選擇了' + cityName,
    })
  }
})

• 第二種

  citys: [{
        "name": "A",
        "list": [{
            "cityCode": "320001",
            "cityName": "阿壩"
          },
          {
            "cityCode": "320002",
            "cityName": "阿拉善"
          },
        ]
      },
      {
        "name": "B",
        "list": [{
          "cityCode": "130600",
          "cityName": "保定市"
        }]
      },
      {
        "name": "C",
        "list": [{
          "cityCode": "130800",
          "cityName": "承德市"
        }]
      },

• 數(shù)據(jù)格式二演示效果

一些必要的備注我都直接放在代碼中了

城市選擇2.gif

• WXML

<scroll-view class="flex-left" scroll-y="true" scroll-into-view="{{scrollIntoId}}">
  <view class='top-module'>
    <view class='top-inner-box'>
      <view class='hot-city-title'>國(guó)內(nèi)熱門城市</view>
      <view class='list-one-line'>
        <view class='one-box' wx:for="{{hotCitys}}" data-index="{{index}}" class="{{((index+1)%3) !=0 ?'one-box':'one-box-last'}}" catchtap='selectHotCity'>{{item.cityName}}</view>
      </view>
    </view>
  </view>
  <view wx:for="{{citys}}" wx:key="zimu" wx:for-index="bigindex" wx:for-item="zimu" class='city-list' catchtap='selectCity'>
    <view class="item-title item-a" id="{{zimu.name}}" data-bigindex="{{bigindex}}">{{zimu.name}}</view>
    <view class="item" wx:for="{{zimu.list}}" wx:key="item" wx:for-item="item" data-bigindex="{{bigindex}}" data-item="{{zimu}}" data-index='{{index}}'>{{item.cityName}}</view>
  </view>
</scroll-view>
  <view class="scroll_list" style='margin-top:{{(100-2.8*(citys.length))/4}}vh'>
    <view class="scroll_list_chi">熱</view>
    <view wx:for="{{citys}}" wx:key="zimu" wx:for-index="bigindex" wx:for-item="zimu" bindtouchstart="touchstartfn">
      <view class="scroll_list_chi" data-id="{{zimu.name}}" data-bigindex="{{bigindex}}" data-index='{{index}}'>{{zimu.name}}</view>
    </view>
  </view>

• WXSS

/**index.wxss**/
page{
  background: #F4F4F4;
}
.top-module{
  width: 100vw;
  height: auto;
}
.top-inner-box{
  width: 96vw;
   height: auto;
  padding-left: 2vw;
  padding-right: 2vw;
 background: white;
}
.hot-city-title{
  height: 8vh;
  line-height: 8vh;
}
.list-one-line{
   height: auto;
  width: 84vw;
  margin-left: 2vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.one-box{
 height: 5vh;
  width:25vw;
  margin-right: 2.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border:1rpx solid rgb(233, 232, 232);
  margin-bottom: 1.4vh;
}
.one-box-last{
   height: 5vh;
  width:25vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border:1rpx solid rgb(233, 232, 232);
  margin-bottom: 1.4vh;
}
page{
  height: 100%;
}
.zimu{
  width: 50rpx;
  height: 20px;
  line-height: 20px;
} 
.zimulist{
  position: fixed;
  top: 0;
  right: 0;
  bottom:0;
  width: 50rpx;
  z-index: 999999999999;
  background-color: #fff;
  text-align: center;
}
.item-title{
  height: 48rpx;
  line-height: 48rpx;
  border-bottom: solid 1rpx #f0f1f2;
 padding-left: 2vw;
  color: #9A9A9A;
}
.item{
  height:80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #D9D9D9;
 margin-left: 3vw;
}
.item-a{
  background-color: #f0f1f2;
}
.flex-wrap{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
.flex-left{
  width: 100vw;
  height: 100%;
}
.flex-right{
  width: 50rpx;
  height: 100%;
}
/*城市選擇 右邊*/
.scroll_list {
    background: rgba(0,0,0,0);
    position: absolute;
    width: 46rpx;
    top: 100rpx;
    right: 6rpx;
}
.city-list{
  background: white;
}
.scroll_list_chi {
    text-align: center;
    font-size: 24rpx;
    color: rgb(39, 39, 39);
    height: 2.4vh;
}
.top-module>view{
  font-size: 28rpx;
}
.city-list>view{
  font-size: 28rpx;
}

• JS

var app = getApp()
Page({
  data: {
    scrollIntoId: '',
    hotCitys: [{
        "cityCode": "130600",
        "cityName": "保定市"
      },
      {
        "cityCode": "140100",
        "cityName": "太原市"
      },
      {
        "cityCode": "150300",
        "cityName": "烏海市"
      },
      {
        "cityCode": "140400",
        "cityName": "長(zhǎng)治市"
      },
      {
        "cityCode": "320100",
        "cityName": "南京市"
      },
      {
        "cityCode": "310000",
        "cityName": "上海市"
      }
    ],
    citys: [{
        "name": "A",
        "list": [{
            "cityCode": "320001",
            "cityName": "阿壩"
          },
          {
            "cityCode": "320002",
            "cityName": "阿拉善"
          },
          {
            "cityCode": "320003",
            "cityName": "阿里"
          },
          {
            "cityCode": "320004",
            "cityName": "安康"
          },
        ]
      },

      {
        "name": "B",
        "list": [{
          "cityCode": "130600",
          "cityName": "保定市"
        }]
      },
      {
        "name": "C",
        "list": [{
          "cityCode": "130800",
          "cityName": "承德市"
        }]
      },
      {
        "name": "H",
        "list": [{
            "cityCode": "131100",
            "cityName": "衡水市"
          },
          {
            "cityCode": "320800",
            "cityName": "淮安市"
          }
        ]
      },
      {
        "name": "M",
        "list": [{
          "cityCode": "231000",
          "cityName": "牡丹江市"
        }]
      },
      {
        "name": "N",
        "list": [{
          "cityCode": "320100",
          "cityName": "南京市"
        }]
      },
      {
        "name": "Q",
        "list": [{
          "cityCode": "130300",
          "cityName": "秦皇島市"
        }]
      },
      {
        "name": "S",
        "list": [{
            "cityCode": "310000",
            "cityName": "上海市"
          },
          {
            "cityCode": "130100",
            "cityName": "石家莊市"
          },
          {
            "cityCode": "320500",
            "cityName": "蘇州市"
          }
        ]
      },
      {
        "name": "T",
        "list": [{
            "cityCode": "140100",
            "cityName": "太原市"
          },
          {
            "cityCode": "130200",
            "cityName": "唐山市"
          }
        ]
      },
      {
        "name": "W",
        "list": [{
          "cityCode": "150300",
          "cityName": "烏海市"
        }]
      },
      {
        "name": "X",
        "list": [{
          "cityCode": "320300",
          "cityName": "徐州市"
        }]
      },
      {
        "name": "Y",
        "list": [{
            "cityCode": "320900",
            "cityName": "鹽城市"
          },
          {
            "cityCode": "321000",
            "cityName": "揚(yáng)州市"
          },
          {
            "cityCode": "140300",
            "cityName": "陽(yáng)泉市"
          }
        ]
      },
      {
        "name": "Z",
        "list": [{
            "cityCode": "140400",
            "cityName": "長(zhǎng)治市"
          },
          {
            "cityCode": "321100",
            "cityName": "鎮(zhèn)江市"
          }
        ]
      }
    ],
  },

  onShow: function() {

  },
  /**
   * 右側(cè)字母索引的觸發(fā)
   */
  touchstartfn: function (e) {
    //console.log(e.target.id)
    console.log(e);
    var letter = e.target.dataset.id
    var index = e.target.dataset.bigindex
    var letter = this.data.citys[index].name
    this.setData({
      scrollIntoId: letter
    })
    wx.showToast({
      icon: 'none',
      title: letter
    })
  },

  // 選擇熱門城市
  selectHotCity: function(e) {
    var that = this
    console.log(e.currentTarget.dataset.index)   //獲取點(diǎn)擊事件列表的索引
    var index = e.currentTarget.dataset.index
    var cityName = that.data.hotCitys[index].cityName   //根據(jù)索引找到熱門城市的名稱
    var cityCode = that.data.hotCitys[index].cityCode    //根據(jù)索引找到熱門城市的code編碼
    wx.showToast({
      title: cityName,
    })
  },

  //選擇城市
  selectCity: function(e) {
    console.log(e)
    var bigIndex = e.target.dataset.bigindex     //嵌套循環(huán)找出外部的索引
    var index = e.target.dataset.index               //嵌套循環(huán)找出子索引
    var zimu = this.data.citys[bigIndex].name   //找到對(duì)應(yīng)的字母
    console.log(index)
    console.log(zimu)
    if (index == undefined) {         //如果子索引為未定義，即點(diǎn)擊了列表中的字母
      wx.showToast({
        title: zimu,
      })
    } else {                        //如果自索引有值饵撑，即點(diǎn)擊了列表中的城市項(xiàng)
      var cityName = this.data.citys[bigIndex].list[index].cityName   //雙重索引找到城市名稱
      var cityCode = this.data.citys[bigIndex].list[index].cityCode     //雙重索引找到城市編碼
      wx.showToast({
        title: cityName,
      })
    }
  },
})

• 補(bǔ)充第一種方法封裝的城市JS

var city = {
  "City": [{
    "A": [{
        "name": "阿壩",
        "key": "A"
      },
      {
        "name": "阿拉善",
        "key": "A"
      },
      {
        "name": "阿里",
        "key": "A"
      },
      {
        "name": "安康",
        "key": "A"
      },
      {
        "name": "安慶",
        "key": "A"
      },
      {
        "name": "鞍山",
        "key": "A"
      },
      {
        "name": "安順",
        "key": "A"
      },
      {
        "name": "安陽(yáng)",
        "key": "A"
      },
      {
        "name": "澳門",
        "key": "A"
      }
    ],
    "B": [{
        "name": "北京",
        "key": "B"
      },
      {
        "name": "白銀",
        "key": "B"
      },
      {
        "name": "保定",
        "key": "B"
      },
      {
        "name": "寶雞",
        "key": "B"
      },
      {
        "name": "保山",
        "key": "B"
      },
      {
        "name": "包頭",
        "key": "B"
      },
      {
        "name": "巴中",
        "key": "B"
      },
      {
        "name": "北海",
        "key": "B"
      },
      {
        "name": "蚌埠",
        "key": "B"
      },
      {
        "name": "本溪",
        "key": "B"
      },
      {
        "name": "畢節(jié)",
        "key": "B"
      },
      {
        "name": "濱州",
        "key": "B"
      },
      {
        "name": "百色",
        "key": "B"
      },
      {
        "name": "亳州",
        "key": "B"
      }
    ],
    "C": [{
        "name": "重慶",
        "key": "C"
      },
      {
        "name": "成都",
        "key": "C"
      },
      {
        "name": "長(zhǎng)沙",
        "key": "C"
      },
      {
        "name": "長(zhǎng)春",
        "key": "C"
      },
      {
        "name": "滄州",
        "key": "C"
      },
      {
        "name": "常德",
        "key": "C"
      },
      {
        "name": "昌都",
        "key": "C"
      },
      {
        "name": "長(zhǎng)治",
        "key": "C"
      },
      {
        "name": "常州",
        "key": "C"
      },
      {
        "name": "巢湖",
        "key": "C"
      },
      {
        "name": "潮州",
        "key": "C"
      },
      {
        "name": "承德",
        "key": "C"
      },
      {
        "name": "郴州",
        "key": "C"
      },
      {
        "name": "赤峰",
        "key": "C"
      },
      {
        "name": "池州",
        "key": "C"
      },
      {
        "name": "崇左",
        "key": "C"
      },
      {
        "name": "楚雄",
        "key": "C"
      },
      {
        "name": "滁州",
        "key": "C"
      },
      {
        "name": "朝陽(yáng)",
        "key": "C"
      }
    ],
    "D": [{
        "name": "大連",
        "key": "D"
      },
      {
        "name": "東莞",
        "key": "D"
      },
      {
        "name": "大理",
        "key": "D"
      },
      {
        "name": "丹東",
        "key": "D"
      },
      {
        "name": "大慶",
        "key": "D"
      },
      {
        "name": "大同",
        "key": "D"
      },
      {
        "name": "大興安嶺",
        "key": "D"
      },
      {
        "name": "德宏",
        "key": "D"
      },
      {
        "name": "德陽(yáng)",
        "key": "D"
      },
      {
        "name": "德州",
        "key": "D"
      },
      {
        "name": "定西",
        "key": "D"
      },
      {
        "name": "迪慶",
        "key": "D"
      },
      {
        "name": "東營(yíng)",
        "key": "D"
      }

    ],
    "E": [{
        "name": "鄂爾多斯",
        "key": "E"
      },
      {
        "name": "恩施",
        "key": "E"
      },
      {
        "name": "鄂州",
        "key": "E"
      }
    ],
    "F": [{
        "name": "福州",
        "key": "F"
      },
      {
        "name": "防城港",
        "key": "F"
      },
      {
        "name": "佛山",
        "key": "F"
      },
      {
        "name": "撫順",
        "key": "F"
      },
      {
        "name": "撫州",
        "key": "F"
      },
      {
        "name": "阜新",
        "key": "F"
      },
      {
        "name": "阜陽(yáng)",
        "key": "F"
      }
    ],
    "G": [{
        "name": "廣州",
        "key": "G"
      },
      {
        "name": "贛州",
        "key": "G"
      },
      {
        "name": "桂林",
        "key": "G"
      },
      {
        "name": "貴陽(yáng)",
        "key": "G"
      },
      {
        "name": "甘南",
        "key": "G"
      },

      {
        "name": "甘孜",
        "key": "G"
      },
      {
        "name": "廣安",
        "key": "G"
      },
      {
        "name": "廣元",
        "key": "G"
      },
      {
        "name": "果洛",
        "key": "G"
      },
      {
        "name": "貴港",
        "key": "G"
      }

    ],

    "H": [{
        "name": "杭州",
        "key": "H"
      },
      {
        "name": "哈爾濱",
        "key": "H"
      },
      {
        "name": "合肥",
        "key": "H"
      },
      {
        "name": "航Ｊ幔口",
        "key": "H"
      },
      {
        "name": "海東",
        "key": "H"
      },
      {
        "name": "海北",
        "key": "H"
      },
      {
        "name": "海南",
        "key": "H"
      },
      {
        "name": "海西",
        "key": "H"
      },
      {
        "name": "邯鄲",
        "key": "H"
      }

      ,
      {
        "name": "漢中",
        "key": "H"
      },
      {
        "name": "鶴壁",
        "key": "H"
      },
      {
        "name": "河池",
        "key": "H"
      },
      {
        "name": "鶴崗",
        "key": "H"
      },
      {
        "name": "黑河",
        "key": "H"
      },
      {
        "name": "衡水",
        "key": "H"
      },
      {
        "name": "衡陽(yáng)",
        "key": "H"
      }

      ,
      {
        "name": "河源",
        "key": "H"
      },
      {
        "name": "賀州",
        "key": "H"
      },
      {
        "name": "紅河",
        "key": "H"
      },
      {
        "name": "淮安",
        "key": "H"
      },
      {
        "name": "淮北",
        "key": "H"
      },
      {
        "name": "懷化",
        "key": "H"
      },
      {
        "name": "淮南",
        "key": "H"
      },

      {
        "name": "黃岡",
        "key": "H"
      },
      {
        "name": "黃南",
        "key": "H"
      },
      {
        "name": "黃山",
        "key": "H"
      },
      {
        "name": "黃石",
        "key": "H"
      },
      {
        "name": "惠州",
        "key": "H"
      },
      {
        "name": "葫蘆島",
        "key": "H"
      },
      {
        "name": "呼倫貝爾",
        "key": "H"
      },
      {
        "name": "湖州",
        "key": "H"
      },
      {
        "name": "菏澤",
        "key": "H"
      }

    ],
    "J": [

      {
        "name": "濟(jì)南",
        "key": "J"
      },
      {
        "name": "佳木斯",
        "key": "J"
      },
      {
        "name": "吉安",
        "key": "J"
      },
      {
        "name": "江門",
        "key": "J"
      },
      {
        "name": "焦作",
        "key": "J"
      },
      {
        "name": "嘉興",
        "key": "J"
      },
      {
        "name": "嘉峪關(guān)",
        "key": "J"
      },
      {
        "name": "揭陽(yáng)",
        "key": "J"
      },

      {
        "name": "吉林",
        "key": "J"
      },
      {
        "name": "金昌",
        "key": "J"
      },
      {
        "name": "晉城",
        "key": "J"
      },
      {
        "name": "景德鎮(zhèn)",
        "key": "J"
      },
      {
        "name": "荊門",
        "key": "J"
      },
      {
        "name": "荊州",
        "key": "J"
      },
      {
        "name": "金華",
        "key": "J"
      }

      ,
      {
        "name": "濟(jì)寧",
        "key": "J"
      },
      {
        "name": "晉中",
        "key": "J"
      },
      {
        "name": "錦州",
        "key": "J"
      },
      {
        "name": "九江",
        "key": "J"
      },
      {
        "name": "酒泉",
        "key": "J"
      }
    ],
    "K": [{
        "name": "昆明",
        "key": "K"

      },
      {

        "name": "開(kāi)封",
        "key": "K"
      }
    ],

    "L": [{
        "name": "蘭州",
        "key": "L"
      },
      {
        "name": "拉薩",
        "key": "L"
      },
      {
        "name": "來(lái)賓",
        "key": "L"
      },
      {
        "name": "萊蕪",
        "key": "L"
      },
      {
        "name": "廊坊",
        "key": "L"
      },
      {
        "name": "樂(lè)山",
        "key": "L"
      },
      {
        "name": "涼山",
        "key": "L"
      },
      {
        "name": "連云港",
        "key": "L"
      }

      ,
      {
        "name": "聊城",
        "key": "L"
      }

      ,
      {
        "name": "遼陽(yáng)",
        "key": "L"
      },
      {
        "name": "遼源",
        "key": "L"
      },
      {
        "name": "麗江",
        "key": "L"
      },
      {
        "name": "臨滄",
        "key": "L"
      },
      {
        "name": "臨汾",
        "key": "L"
      },
      {
        "name": "臨夏",
        "key": "L"
      },

      {
        "name": "臨沂",
        "key": "L"
      }

      ,
      {
        "name": "林芝",
        "key": "L"
      },
      {
        "name": "麗水",
        "key": "L"
      },
      {
        "name": "六安",
        "key": "L"
      },
      {
        "name": "六盤水",
        "key": "L"
      },
      {
        "name": "柳州",
        "key": "L"
      },
      {
        "name": "隴南",
        "key": "L"
      },

      {
        "name": "龍巖",
        "key": "L"
      },

      {
        "name": "婁底",
        "key": "L"
      },
      {
        "name": "漯河",
        "key": "L"
      },
      {
        "name": "洛陽(yáng)",
        "key": "L"
      },
      {
        "name": "瀘州",
        "key": "L"
      },
      {
        "name": "呂梁",
        "key": "L"
      }

    ],

    "M": [{
        "name": "馬鞍山",
        "key": "M"
      },
      {
        "name": "茂名",
        "key": "M"
      },
      {
        "name": "眉山",
        "key": "M"
      },
      {
        "name": "梅州",
        "key": "M"
      },
      {
        "name": "綿陽(yáng)",
        "key": "M"
      },
      {
        "name": "牡丹江",
        "key": "M"
      }

    ],
    "N": [

      {
        "name": "南京",
        "key": "N"
      },
      {
        "name": "南昌",
        "key": "N"
      },
      {
        "name": "南寧",
        "key": "N"
      },
      {
        "name": "南充",
        "key": "N"
      },
      {
        "name": "南平",
        "key": "N"
      },
      {
        "name": "南通",
        "key": "N"
      },
      {
        "name": "南陽(yáng)",
        "key": "N"
      },
      {
        "name": "那曲",
        "key": "N"
      }

      ,
      {
        "name": "內(nèi)江",
        "key": "N"
      },
      {
        "name": "寧德",
        "key": "N"
      },
      {
        "name": "怒江",
        "key": "N"
      }


    ],
    "P": [

      {
        "name": "盤錦",
        "key": "P"
      },
      {
        "name": "攀枝花",
        "key": "P"
      },
      {
        "name": "平頂山",
        "key": "P"
      },
      {
        "name": "平?jīng)?,
        "key": "P"
      },
      {
        "name": "萍鄉(xiāng)",
        "key": "P"
      },
      {
        "name": "莆田",
        "key": "P"
      },
      {
        "name": "濮陽(yáng)",
        "key": "P"
      }

    ],
    "Q": [

      {
        "name": "青島",
        "key": "Q"
      },
      {
        "name": "黔東南",
        "key": "Q"
      },
      {
        "name": "黔南",
        "key": "Q"
      },
      {
        "name": "黔西南",
        "key": "Q"
      },
      {
        "name": "慶陽(yáng)",
        "key": "Q"
      },
      {
        "name": "清遠(yuǎn)",
        "key": "Q"
      },
      {
        "name": "秦皇島",
        "key": "Q"
      },
      {
        "name": "欽州",
        "key": "Q"
      },
      {
        "name": "齊齊哈爾",
        "key": "Q"
      },
      {
        "name": "泉州",
        "key": "Q"
      },
      {
        "name": "曲靖",
        "key": "Q"
      },
      {
        "name": "衢州",
        "key": "Q"
      }


    ],

    "R": [{
        "name": "日喀則",
        "key": "R"
      },
      {
        "name": "日照",
        "key": "R"
      }
    ],

    "S": [{
        "name": "上海",
        "key": "S"
      },
      {
        "name": "深圳",
        "key": "S"
      },
      {
        "name": "蘇州",
        "key": "S"
      },
      {
        "name": "沈陽(yáng)",
        "key": "S"
      },
      {
        "name": "石家莊",
        "key": "S"
      },
      {
        "name": "三門峽",
        "key": "S"
      },
      {
        "name": "三明",
        "key": "S"
      },
      {
        "name": "三亞",
        "key": "S"
      }

      ,
      {
        "name": "商洛",
        "key": "S"
      }

      ,
      {
        "name": "商丘",
        "key": "S"
      },
      {
        "name": "上饒",
        "key": "S"
      },
      {
        "name": "山南",
        "key": "S"
      },
      {
        "name": "汕頭",
        "key": "S"
      },
      {
        "name": "汕尾",
        "key": "S"
      },
      {
        "name": "韶關(guān)",
        "key": "S"
      },

      {
        "name": "紹興",
        "key": "S"
      }

      ,
      {
        "name": "邵陽(yáng)",
        "key": "S"
      },
      {
        "name": "十堰",
        "key": "S"
      },
      {
        "name": "朔州",
        "key": "S"
      },
      {
        "name": "四平",
        "key": "S"
      },
      {
        "name": "綏化",
        "key": "S"
      },
      {
        "name": "遂寧",
        "key": "S"
      },

      {
        "name": "隨州",
        "key": "S"
      },

      {
        "name": "婁底",
        "key": "S"
      },
      {
        "name": "宿遷",
        "key": "S"
      },
      {
        "name": "宿州",
        "key": "S"
      }

    ],
    "T": [

      {
        "name": "天津",
        "key": "T"
      },
      {
        "name": "太原",
        "key": "T"
      },
      {
        "name": "泰安",
        "key": "T"
      },
      {
        "name": "泰州",
        "key": "T"
      },
      {
        "name": "唐山",
        "key": "T"
      },
      {
        "name": "天水",
        "key": "T"
      },
      {
        "name": "鐵嶺",
        "key": "T"
      },
      {
        "name": "銅川",
        "key": "T"
      },

      {
        "name": "通化",
        "key": "T"
      },
      {
        "name": "通遼",
        "key": "T"
      },
      {
        "name": "銅陵",
        "key": "T"
      },
      {
        "name": "銅仁",
        "key": "T"
      },
      {
        "name": "臺(tái)灣",
        "key": "T"
      }


    ],
    "W": [

      {
        "name": "武漢",
        "key": "W"
      },
      {
        "name": "烏魯木齊",
        "key": "W"
      },
      {
        "name": "無(wú)錫",
        "key": "W"
      },
      {
        "name": "威海",
        "key": "W"
      },
      {
        "name": "濰坊",
        "key": "W"
      },
      {
        "name": "文山",
        "key": "W"
      },
      {
        "name": "溫州",
        "key": "W"
      },
      {
        "name": "烏海",
        "key": "W"
      },

      {
        "name": "蕪湖",
        "key": "W"
      },
      {
        "name": "烏蘭察布",
        "key": "W"
      },
      {
        "name": "武威",
        "key": "W"
      },
      {
        "name": "梧州",
        "key": "W"
      }

    ],
    "X": [

      {
        "name": "廈門",
        "key": "X"
      },
      {
        "name": "西安",
        "key": "X"
      },
      {
        "name": "西寧",
        "key": "X"
      },
      {
        "name": "襄樊",
        "key": "X"
      },
      {
        "name": "湘潭",
        "key": "X"
      },
      {
        "name": "湘西",
        "key": "X"
      },
      {
        "name": "咸寧",
        "key": "X"
      },
      {
        "name": "咸陽(yáng)",
        "key": "X"
      },

      {
        "name": "孝感",
        "key": "X"
      },
      {
        "name": "邢臺(tái)",
        "key": "X"
      },
      {
        "name": "新鄉(xiāng)",
        "key": "X"
      },
      {
        "name": "信陽(yáng)",
        "key": "X"
      },
      {
        "name": "新余",
        "key": "X"
      },
      {
        "name": "忻州",
        "key": "X"
      },
      {
        "name": "西雙版納",
        "key": "X"
      }

      ,
      {
        "name": "宣城",
        "key": "X"
      },

      {
        "name": "許昌",
        "key": "X"
      },
      {
        "name": "徐州",
        "key": "X"
      },
      {
        "name": "香港",
        "key": "X"
      },
      {
        "name": "錫林郭勒",
        "key": "X"
      },
      {
        "name": "興安",
        "key": "X"
      }
    ],
    "Y": [

      {
        "name": "銀川",
        "key": "Y"
      },
      {
        "name": "雅安",
        "key": "Y"
      },
      {
        "name": "延安",
        "key": "Y"
      },
      {
        "name": "延邊",
        "key": "Y"
      },
      {
        "name": "鹽城",
        "key": "Y"
      },
      {
        "name": "陽(yáng)江",
        "key": "Y"
      },

      {
        "name": "陽(yáng)泉",
        "key": "Y"
      },
      {
        "name": "揚(yáng)州",
        "key": "Y"
      },

      {
        "name": "煙臺(tái)",
        "key": "Y"
      },
      {
        "name": "宜賓",
        "key": "Y"
      },
      {
        "name": "宜昌",
        "key": "Y"
      },
      {
        "name": "宜春",
        "key": "Y"
      },
      {
        "name": "營(yíng)口",
        "key": "Y"
      },

      {
        "name": "益陽(yáng)",
        "key": "Y"
      },
      {
        "name": "永州",
        "key": "Y"
      }

      ,
      {
        "name": "岳陽(yáng)",
        "key": "Y"
      },

      {
        "name": "榆林",
        "key": "Y"
      },
      {
        "name": "運(yùn)城",
        "key": "Y"
      },
      {
        "name": "云浮",
        "key": "Y"
      },
      {
        "name": "玉樹(shù)",
        "key": "Y"
      },
      {
        "name": "玉溪",
        "key": "Y"
      },
      {
        "name": "玉林",
        "key": "Y"
      }

    ],

    "Z": [{
        "name": "雜多縣",
        "key": "Z"
      },
      {
        "name": "贊皇縣",
        "key": "Z"
      },
      {
        "name": "棗強(qiáng)縣",
        "key": "Z"
      },
      {
        "name": "棗陽(yáng)市",
        "key": "Z"
      },
      {
        "name": "棗莊",
        "key": "Z"
      },
      {
        "name": "澤庫(kù)縣",
        "key": "Z"
      },
      {
        "name": "增城市",
        "key": "Z"
      },

      {
        "name": "曾都區(qū)",
        "key": "Z"
      },
      {
        "name": "澤普縣",
        "key": "Z"
      }

      ,
      {
        "name": "澤州縣",
        "key": "Z"
      },
      {
        "name": "札達(dá)縣",
        "key": "Z"
      },
      {
        "name": "扎賚特旗",
        "key": "Z"
      },
      {
        "name": "扎蘭屯市",
        "key": "Z"
      },
      {
        "name": "扎魯特旗",
        "key": "Z"
      },

      {
        "name": "扎囊縣",
        "key": "Z"
      },
      {
        "name": "張北縣",
        "key": "Z"
      }

      ,
      {
        "name": "張店區(qū)",
        "key": "Z"
      },
      {
        "name": "章貢區(qū)",
        "key": "Z"
      },
      {
        "name": "張家港",
        "key": "Z"
      },
      {
        "name": "張家界",
        "key": "Z"
      },
      {
        "name": "張家口",
        "key": "Z"
      },
      {
        "name": "漳平市",
        "key": "Z"
      },

      {
        "name": "漳浦縣",
        "key": "Z"
      },

      {
        "name": "章丘市",
        "key": "Z"
      },
      {
        "name": "樟樹(shù)市",
        "key": "Z"
      },
      {
        "name": "張灣區(qū)",
        "key": "Z"
      },
      {
        "name": "彰武縣",
        "key": "Z"
      },
      {
        "name": "漳縣",
        "key": "Z"
      },
      {
        "name": "張掖",
        "key": "Z"
      },
      {
        "name": "漳州",
        "key": "Z"
      },
      {
        "name": "長(zhǎng)子縣",
        "key": "Z"
      },

      {
        "name": "湛河區(qū)",
        "key": "Z"
      },
      {
        "name": "湛江",
        "key": "Z"
      },

      {
        "name": "站前區(qū)",
        "key": "Z"
      },
      {
        "name": "沾益縣",
        "key": "Z"
      },
      {
        "name": "詔安縣",
        "key": "Z"
      },
      {
        "name": "召陵區(qū)",
        "key": "Z"
      },
      {
        "name": "昭平縣",
        "key": "Z"
      },
      {
        "name": "肇慶",
        "key": "Z"
      },
      {
        "name": "昭通",
        "key": "Z"
      },
      {
        "name": "趙縣",
        "key": "Z"
      }
    ]
  }]
}
module.exports = city;

這個(gè)只是我個(gè)人總結(jié)嘗試出來(lái)的兩種方案，還存在很多的不足之處肄梨，如果大家覺(jué)得有什么不合理的地方阻荒，歡迎評(píng)論指出或者添加qq交流。

guoguo.jpg