基于js实现的省市选择

本省市选择基于js实现，样式基于framework7，个人原创，转载请注明出处。
效果展示：
图标：
插入内容承接的父节点：<div class="position-screen popup"></div>
省市节点结构：
</a>
<div class="accordion-item-content">
<div class="list-block contacts-block">
<div class="list-group">
<ul>
<li>
<div class="item-content">
<div class="item-title close-popup" onclick="selectRegion($$(this))">
<div class="item-title">金华市</div>
......
var region=\'华东区 华北区 华南区 东北区 华中区 待解放\'.split(\' \'),
    city=[],
provs=[3,5,6,3,10,1],
hotcity=\'上海市 北京市 天津市 重庆市 杭州市 广州市 深圳市\'.split(\' \');
city.push(\'安徽省 芜湖市 合肥市 六安市 宿州市 阜阳市 安庆市 马鞍山市 蚌埠市 淮北市 淮南市 宣城市 黄山市 铜陵市 亳州市 池州市 巢湖市 滁州市\'.split(\' \'));//安徽省
city.push(\'江苏省 苏州市 徐州市 盐城市 无锡市 南京市 南通市 连云港市 常州市 镇江市 扬州市 淮安市 泰州市 宿迁市\'.split(\' \'));//江苏省
city.push(\'浙江省 温州市 宁波市 杭州市 台州市 嘉兴市 金华市 湖州市 绍兴市 舟山市 丽水市 衢州市\'.split(\' \'));//浙江省

city.push(\'河北省 石家庄市 唐山市 保定市 邯郸市 邢台市 河北区 沧州市 秦皇岛市 张家口市 衡水市 廊坊市 承德市\'.split(\' \'));//河北省
city.push(\'河南省 郑州市 南阳市 新乡市 安阳市 洛阳市 信阳市 平顶山市 周口市 商丘市 开封市 焦作市 驻马店市 濮阳市 三门峡市 漯河市 许昌市 鹤壁市 济源市\'.split(\' \'));//河南省
city.push(\'内蒙古自治区 赤峰市 包头市 通辽市 呼和浩特市 鄂尔多斯市 乌海市 呼伦贝尔市 兴安盟 巴彦淖尔盟 乌兰察布盟 锡林郭勒盟 阿拉善盟\'.split(\' \'))//内蒙古自治区
city.push(\'山东省 济南市 青岛市 临沂市 济宁市 菏泽市 烟台市 淄博市 泰安市 潍坊市 日照市 威海市 滨州市 东营市 聊城市 德州市 莱芜市 枣庄市\'.split(\' \'));//山东省
city.push(\'山西省 太原市 大同市 运城市 长治市 晋城市 忻州市 临汾市 吕梁市 晋中市 阳泉市 朔州市\'.split(\' \'))//山西省

city.push(\'福建省 漳州市 厦门市 泉州市 福州市 莆田市 宁德市 三明市 南平市 龙岩市\'.split(\' \'));//福建省
city.push(\'广东省 东莞市 广州市 中山市 深圳市 惠州市 江门市 珠海市 汕头市 佛山市 湛江市 河源市 肇庆市 清远市 潮州市 韶关市 揭阳市 阳江市 梅州市 云浮市 茂名市 汕尾市\'.split(\' \'));//广东省
city.push(\'广西壮族自治区 贵港市 玉林市 北海市 南宁市 柳州市 桂林市 梧州市 钦州市 来宾市 河池市 百色市 贺州市 崇左市 防城港市\'.split(\' \'));//广西壮族自治区
city.push(\'贵州省 贵阳市 黔东南州 黔南州 遵义市 黔西南州 毕节地区 铜仁地区 安顺市 六盘水市\'.split(\' \'))//贵州省
city.push(\'海南省 三亚市 海口市 琼海市 文昌市 东方市 昌江县 陵水县 乐东县 保亭县 五指山市 澄迈县 万宁市 儋州市 临高县 白沙县 定安县 琼中县 屯昌县\'.split(\' \'))//海南省
city.push(\'云南省 昆明市 红河州 大理州 文山州 德宏州 曲靖市 昭通市 楚雄州 保山市 玉溪市 丽江地区 临沧地区 思茅地区 西双版纳州 怒江州 迪庆州\'.split(\' \'));//云南省

city.push(\'黑龙江 齐齐哈尔市 哈尔滨市 大庆市 佳木斯市 双鸭山市 牡丹江市 鸡西市 黑河市 绥化市 鹤岗市 伊春市 大兴安岭地区 七台河市\'.split(\' \'))//黑龙江
city.push(\'吉林省 吉林市 长春市 白山市 延边州 白城市 松原市 辽源市 通化市 四平市\'.split(\' \'))//吉林省
city.push(\'辽宁省 大连市 沈阳市 丹东市 辽阳市 葫芦岛市 锦州市 朝阳市 营口市 鞍山市 抚顺市 阜新市 盘锦市 本溪市 铁岭市\'.split(\' \'))//辽宁省

city.push(\'甘肃省 兰州市 天水市 庆阳市 武威市 酒泉市 张掖市 陇南地区 白银市 定西地区 平凉市 嘉峪关市 临夏回族自治州 金昌市 甘南州\'.split(\' \'))//甘肃省
city.push(\'湖北省 武汉市 宜昌市 襄樊市 荆州市 恩施州 黄冈市 孝感市 十堰市 咸宁市 黄石市 仙桃市 天门市 随州市 荆门市 潜江市 鄂州市 神农架林区\'.split(\' \'))//湖北省
city.push(\'湖南省 长沙市 邵阳市 常德市 衡阳市 株洲市 湘潭市 永州市 岳阳市 怀化市 郴州市 娄底市 益阳市 张家界市 湘西州\'.split(\' \'));//湖南省
city.push(\'江西省 南昌市 赣州市 上饶市 吉安市 九江市 新余市 抚州市 宜春市 景德镇市 萍乡市 鹰潭市\'.split(\' \'))//江西省
city.push(\'宁夏回族自治区 银川市 吴忠市 中卫市 石嘴山市 固原市\'.split(\' \'))//宁夏回族自治区
city.push(\'青海省 西宁市 海西州 海东地区 海北州 果洛州 玉树州 黄南藏族自治州\'.split(\' \'))//青海省
city.push(\'陕西省 西安市 咸阳市 宝鸡市 汉中市 渭南市 安康市 榆林市 商洛市 延安市 铜川市\'.split(\' \'));//陕西省
city.push(\'四川省 成都市 绵阳市 广元市 达州市 南充市 德阳市 广安市 阿坝州 巴中市 遂宁市 内江市 凉山州 攀枝花市 乐山市 自贡市 泸州市 雅安市 宜宾市 资阳市 眉山市 甘孜州\'.split(\' \'));//四川省
city.push(\'西藏自治区 拉萨市 山南地区 林芝地区 日喀则地区 阿里地区 昌都地区 那曲地区\'.split(\' \'))//西藏区
city.push(\'新疆维吾尔自治区 乌鲁木齐市 伊犁州 昌吉州 石河子市 哈密地区 阿克苏地区 巴音郭楞州 喀什地区 塔城地区 克拉玛依市 和田地区 阿勒泰州 吐鲁番地区 阿拉尔市 博尔塔拉州 五家渠市 克孜勒苏州 图木舒克市\'.split(\' \'))//新疆维吾尔自治区

city.push(\'台湾省 台北市 高雄市 台中市 新竹市 基隆市 台南市 嘉义市\'.split(\' \'))//台湾省

var i=0,j=0,c=0,t=0,k=0;
var str=\'<div class="list-block accordion-list"><ul><li class="list-group-title" style="height:40px;background-color:#ccc;line-height:40px;">热门城市</li>\';
// 此单次循环实现热门分类
for (i = 0; i < hotcity.length; ++i) {
  str=str+\'<li><div class="item-content"><div class="item-inner close-popup" onclick="selectRegion($$(this))"><div class="item-title">\'+hotcity[i]+\'</div></div></div></li>\';
}
for (i = 0,c = 0; i < region.length; i++,c++) {
  str=str+\'<li class="list-group-title" style="height:40px;background-color:#ccc;line-height:40px;">\'+region[i]+\'</li>\';
  for (j=0; j < provs[c]; j++,k++) {
    str=str+\'<li class="accordion-item"><a href="#" class="item-content item-link"><div class="item-inner"><div class="item-title">\'+city[k][0]+\'</div></div></a>\';
    str+=\'<div class="accordion-item-content"><div class="list-block contacts-block"><div class="list-group"><ul>\';
    for (t = 1; t < city[k].length; t++) {
      str=str+\'<li><div class="item-content"><div class="item-inner close-popup" onclick="selectRegion($$(this))"><div class="item-title">\'+city[k][t]+\'</div></div></div></li>\';
    }
  str+=\'</ul></div></div></div></li>\';
  }
}
str+=\'</ul></div>\';
$$(\'.position-screen\').append(str);
$$($$(\'.item-content .item-inner\')[0]).append(\'<img src="img/select-my.png" style="position:absolute;right:15px;top:8px;" id="selectProv">\');
//选择后更换图标
function selectRegion(item){
  $$(\'#selectProv\').remove();
  item.append(\'<img src="/img/select-my.png" style="position:absolute;right:15px;top:8px;" id="selectProv">\');
}