基于js实现的省市选择
本省市选择基于js实现，样式基于framework7，个人原创，转载请注明出处。
效果展示：
图标：
插入内容承接的父节点：<div class="position-screen popup"></div>
省市节点结构：
<li class="accordion-item">
<a href="" class="item-content item-link">
<div class="item-inner">
<div class="item-title">浙江省</div>
</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">');
}
