版权声明:可任意转载,转载注明出处。 https://blog.csdn.net/Handsome_fan/article/details/80724728
今天我做了一个移动端的时间联动选择的小实例,最终的效果如下:
这个时间联动选择所用的地区数据的数据结构是这样的:
var area = [
{
name: '华北地区',
province: [
{
name: '北京市',
city: [
{
name: "北京市",
districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区"]
}
]
},
{
name: '河北省',
city: [
{
name: "石家庄市",
districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区", "井陉矿区", "辛集市"]
},
{
name: "张家口市",
districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县"]
},
{
name: "承德市",
districtAndCounty: ["双桥区", "双滦区", "承德县", "下板城镇", "兴隆县", "兴隆镇"]
}
]
},
{
name: '山西省',
city: [
{
name: "太原市",
districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区"]
},
{
name: "朔州市",
districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]
},
{
name: "大同市",
districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳高县", "玉泉镇", "广灵县"]
},
{
name: "阳泉市",
districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]
},
{
name: "长治市",
districtAndCounty: ["城区", "郊区", "潞城市", "长治县", "韩店镇", "襄垣县", "古韩镇"]
}
]
}
]
},
{
name: '华东地区',
province: [
{
name: '江苏省',
city: [
{
name: '南京市',
districtAndCounty: ["玄武区", "白下区", "秦淮区", "建邺区", "鼓楼区", "下关区", "浦口区", "六合区", "栖霞区", "雨花台区", "江宁区"]
},
{
name: "徐州市",
districtAndCounty: ["云龙区", "鼓楼区", "九里区", "贾汪区", "泉山区", "邳州市", "新沂市", "铜山县", "铜山镇", "睢宁县", "睢城镇"]
},
{
name: "连云港市",
districtAndCounty: ["新浦区", "连云区", "海州区", "赣榆县", "青口镇", "灌云县", "伊山镇", "东海县", "牛山镇", "灌南县", "新安镇"]
}
]
},
{
name: '浙江省',
city: [
{
name: "杭州市",
districtAndCounty: ["拱墅区", "上城区", "下城区", "江干区", "西湖区", "滨江区", "余杭区", "萧山区", "临安市", "富阳市", "建德市"]
},
{
name: "湖州市",
districtAndCounty: ["吴兴区", "南浔区", "长兴县", "雉城镇", "德清县", "武康镇", "安吉县", "递铺镇"]
},
{
name: "嘉兴市",
districtAndCounty: ["南湖区", "秀洲区", "平湖市", "海宁市", "桐乡市", "嘉善县", "魏塘镇", "海盐县", "武原镇"]
},
{
name: "舟山市",
districtAndCounty: ["定海区", "普陀区", "岱山县", "高亭镇", "嵊泗县", "菜园镇"]
},
{
name: "宁波市",
districtAndCounty: ["海曙区", "江东区", "江北区", "北仑区", "镇海区"]
},
{
name: "绍兴市",
districtAndCounty: ["越城区", "诸暨市", "上虞市", "嵊州市", "绍兴县", "新昌县", "城关镇"]
},
{
name: "衢州市",
districtAndCounty: ["柯城区", "衢江区", "江山市", "常山县", "天马镇", "开化县", "城关镇", "龙游县"]
},
{
name: "金华市",
districtAndCounty: ["婺城区", "金东区", "兰溪市", "永康市", "义乌市", "东阳市"]
},
{
name: "台州市",
districtAndCounty: ["椒江区", "黄岩区", "路桥区", "临海市", "温岭市", "三门县"]
},
{
name: "温州市",
districtAndCounty: ["鹿城区", "龙湾区", "瓯海区", "瑞安市", "乐清市", "永嘉县", "上塘镇"]
},
{
name: "丽水市",
districtAndCounty: ["莲都区", "龙泉市", "缙云县", "五云镇", "青田县"]
}
]
},
{
name: '安徽省',
city: [
{
name: "合肥市",
districtAndCounty: ["庐阳区", "瑶海区", "蜀山区", "包河区", "长丰县", "水湖镇", "肥东县", "店埠镇", "肥西县", "上派镇"]
},
{
name: "宿州市",
districtAndCounty: ["埇桥区", "砀山县", "砀城镇", "萧县", "龙城镇", "灵璧县", "灵城镇", "泗县", "泗城镇"]
},
{
name: "淮北市",
districtAndCounty: ["相山区", "杜集区", "烈山区", "濉溪县", "濉溪镇"]
},
{
name: "亳州市",
districtAndCounty: ["谯城区", "涡阳县", "城关镇", "蒙城县", "城关镇", "利辛县", "城关镇"]
}
]
},
{
name: '江西省',
city: [
{
name: "南昌市",
districtAndCounty: ["东湖区", "西湖区", "青云谱区", "湾里区", "青山湖区", "南昌县", "莲塘镇", "新建县", "长堎镇", "安义县"]
},
{
name: "九江市",
districtAndCounty: ["浔阳区", "庐山区", "瑞昌市", "九江县", "沙河街镇", "武宁县", "新宁镇", "修水县", "义宁镇"]
},
{
name: "景德镇市",
districtAndCounty: ["珠山区", "昌江区", "乐平市", "浮梁县", "浮梁镇"]
},
{
name: "鹰潭市",
districtAndCounty: ["月湖区", "贵溪市", "余江县", "邓埠镇"]
},
{
name: "新余市",
districtAndCounty: ["渝水区", "分宜县", "分宜镇"]
},
{
name: "萍乡市",
districtAndCounty: ["安源区", "湘东区", "莲花县", "琴亭镇", "上栗县", "上栗镇", "芦溪县", "芦溪镇"]
},
{
name: "赣州市",
districtAndCounty: ["章贡区", "瑞金市", "南康市", "赣县", "梅林镇", "信丰县", "嘉定镇", "大余县"]
},
{
name: "上饶市",
districtAndCounty: ["信州区", "德兴市", "上饶县", "旭日镇", "广丰县", "永丰镇", "玉山县"]
},
{
name: "抚州市",
districtAndCounty: ["临川区", "南城县", "建昌镇", "黎川县", "日峰镇", "南丰县", "琴城镇"]
},
{
name: "宜春市",
districtAndCounty: ["袁州区", "丰城市", "樟树市", "高安市", "奉新县", "冯川镇", "万载县", "上高县", "宜丰县", "新昌镇"]
},
{
name: "吉安市",
districtAndCounty: ["吉州区", "青原区", "井冈山市", "厦坪镇", "吉安县", "敦厚镇", "吉水县", "文峰镇", "峡江县"]
}
]
}
]
},
{
name: '东北地区',
province: [
{
name: '辽宁省',
city: [
{
name: "沈阳市",
districtAndCounty: ["沈河区", "和平区", "大东区", "皇姑区", "铁西区", "苏家屯区"]
},
{
name: "朝阳市",
districtAndCounty: ["双塔区", "龙城区", "北票市", "凌源市", "朝阳县", "朝阳市双塔区", "建平县"]
},
{
name: "阜新市",
districtAndCounty: ["海州区", "新邱区", "太平区", "清河门区", "细河区", "彰武县", "彰武镇"]
},
{
name: "铁岭市",
districtAndCounty: ["银州区", "清河区", "调兵山市", "开原市", "铁岭县"]
},
{
name: "抚顺市",
districtAndCounty: ["顺城区", "新抚区", "东洲区", "望花区", "抚顺县"]
},
{
name: "本溪市",
districtAndCounty: ["平山区", "溪湖区", "明山区", "南芬区"]
},
{
name: "辽阳市",
districtAndCounty: ["白塔区", "文圣区", "宏伟区", "弓长岭区", "太子河区", "灯塔市", "辽阳县", "首山镇"]
},
{
name: "鞍山市",
districtAndCounty: ["铁东区", "铁西区", "立山区", "千山区", "海城市", "台安县"]
},
{
name: "丹东市",
districtAndCounty: ["振兴区", "元宝区", "振安区", "凤城市", "东港市", "宽甸镇"]
},
{
name: "大连市",
districtAndCounty: ["西岗区", "中山区", "沙河口区", "甘井子区", "旅顺口区", "金州区", "瓦房店市"]
}
]
},
{
name: '吉林省',
city: [
{
name: "长春市",
districtAndCounty: ["朝阳区", "南关区", "宽城区", "二道区", "绿园区", "双阳区", "德惠市", "九台市", "榆树市", "农安县", "农安镇"]
},
{
name: "白城市",
districtAndCounty: ["洮北区", "大安市", "洮南市", "镇赉县", "镇赉镇", "通榆县", "开通镇"]
},
{
name: "松原市",
districtAndCounty: ["宁江区", "扶余县", "三岔河镇", "长岭县", "长岭镇", "乾安县", "乾安镇", "前郭镇"]
},
{
name: "吉林市",
districtAndCounty: ["船营区", "龙潭区", "昌邑区", "丰满区", "磐石市", "蛟河市", "桦甸市", "舒兰市", "永吉县", "口前镇"]
},
{
name: "四平市",
districtAndCounty: ["铁西区", "铁东区", "双辽市", "公主岭市", "梨树县", "梨树镇", "伊通镇"]
},
{
name: "辽源市",
districtAndCounty: ["龙山区", "西安区", "东丰县", "东丰镇", "东辽县", "白泉镇"]
}
]
},
{
name: '山东省',
city: [
{
name: "济南市",
districtAndCounty: ["市中区", "历下区", "槐荫区", "天桥区", "历城区", "长清区", "章丘市", "平阴县", "平阴镇", "济阳县", "济阳镇", "商河县"]
},
{
name: "青岛市",
districtAndCounty: ["市南区", "市北区", "四方区", "黄岛区", "崂山区", "城阳区", "李沧区", "胶州市", "即墨市", "平度市", "胶南市", "莱西市"]
},
{
name: "聊城市",
districtAndCounty: ["东昌府区", "临清市", "阳谷县", "莘县", "茌平县", "东阿县", "冠县", "冠城镇", "高唐县"]
},
{
name: "德州市",
districtAndCounty: ["德城区", "乐陵市", "禹城市", "陵县", "陵城镇", "平原县", "夏津县", "夏津镇", "武城县", "武城镇", "齐河县", "晏城镇", "临邑县", "宁津县", "宁津镇", "庆云县", "庆云镇"]
},
{
name: "东营市",
districtAndCounty: ["东营区", "河口区", "垦利县", "垦利镇", "利津县", "利津镇", "广饶县", "广饶镇"]
},
{
name: "淄博市",
districtAndCounty: ["张店区", "淄川区", "博山区", "临淄区", "周村区", "桓台县", "索镇", "高青县", "田镇", "沂源县", "南麻镇"]
},
{
name: "潍坊市",
districtAndCounty: ["潍城区", "寒亭区", "坊子区", "奎文区", "安丘市", "昌邑市", "高密市", "青州市", "诸城市", "寿光市", "临朐县", "昌乐县"]
},
{
name: "烟台市",
districtAndCounty: ["莱山区", "芝罘区", "福山区", "牟平区", "栖霞市", "海阳市", "龙口市", "莱阳市", "莱州市", "蓬莱市", "招远市", "长岛县", "南长山镇"]
},
{
name: "威海市",
districtAndCounty: ["环翠区", "荣成市", "乳山市", "文登市"]
},
{
name: "日照市",
districtAndCounty: ["东港区", "岚山区", "五莲县", "洪凝镇", "莒县", "城阳镇"]
},
{
name: "临沂市",
districtAndCounty: ["兰山区", "罗庄区", "河东区", "郯城县", "郯城镇", "苍山县", "卞庄镇", "莒南县", "十字路镇", "沂水县", "沂水镇", "蒙阴县", "蒙阴镇", "平邑县", "平邑镇", "费县", "费城镇", "沂南县", "界湖镇", "临沭县", "临沭镇"]
},
{
name: "枣庄市",
districtAndCounty: ["薛城区", "市中区", "峄城区", "台儿庄区", "山亭区", "滕州市"]
},
{
name: "济宁市",
districtAndCounty: ["市中区", "任城区", "曲阜市", "兖州市", "邹城市", "微山县", "鱼台县", "谷亭镇", "金乡县", "金乡镇", "嘉祥县", "嘉祥镇", "汶上县", "汶上镇", "泗水县", "梁山县", "梁山镇"]
},
{
name: "泰安市",
districtAndCounty: ["泰山区", "岱岳区", "新泰市", "肥城市", "宁阳县", "宁阳镇", "东平县", "东平镇"]
},
{
name: "莱芜市",
districtAndCounty: ["莱城区", "钢城区"]
},
{
name: "滨州市",
districtAndCounty: ["滨城区", "惠民县", "惠民镇", "阳信县", "阳信镇", "无棣县", "无棣镇", "沾化县", "富国镇", "博兴县", "博兴镇", "邹平县"]
},
{
name: "菏泽市",
districtAndCounty: ["牡丹区", "曹县", "曹城镇", "定陶县", "定陶镇", "成武县", "成武镇", "单县", "单城镇", "巨野县", "巨野镇", "郓城县", "郓城镇", "鄄城县", "鄄城镇", "东明县", "城关镇"]
}
]
}
]
},
{
name: '华中地区',
province: [
{
name: '河南省',
city: [
{
name: "郑州市",
districtAndCounty: ["中原区", "二七区", "金水区", "上街区", "惠济区"]
},
{
name: "开封市",
districtAndCounty: ["鼓楼区", "龙亭区", "顺河回族区", "禹王台区"]
},
{
name: "三门峡市",
districtAndCounty: ["湖滨区", "义马市", "灵宝市", "渑池县", "城关镇", "陕县", "大营镇", "卢氏县", "城关镇"]
},
{
name: "洛阳市",
districtAndCounty: ["西工区", "老城区", "涧西区", "吉利区", "洛龙区", "偃师市", "孟津县", "城关镇"]
},
{
name: "焦作市",
districtAndCounty: ["解放区", "山阳区", "中站区", "马村区", "孟州市", "沁阳市", "修武县", "城关镇", "博爱县"]
}
]
},
{
name: '湖北省',
city: [
{
name: "武汉市",
districtAndCounty: ["江岸区", "江汉区", "硚口区", "汉阳区", "武昌区", "青山区", "洪山区", "东西湖区", "汉南区", "蔡甸区"]
},
{
name: "十堰市",
districtAndCounty: ["张湾区", "茅箭区", "丹江口市", "郧县", "城关镇", "竹山县"]
},
{
name: "襄樊市",
districtAndCounty: ["襄城区", "樊城区", "襄阳区", "老河口市", "枣阳市"]
},
{
name: "荆门市",
districtAndCounty: ["东宝区", "掇刀区", "钟祥市", "沙洋县", "沙洋镇", "京山县", "新市镇"]
},
{
name: "孝感市",
districtAndCounty: ["孝南区", "应城市", "安陆市", "汉川市", "孝昌县", "花园镇", "大悟县", "城关镇", "云梦县", "城关镇"]
},
{
name: "黄冈市",
districtAndCounty: ["黄州区", "麻城市", "武穴市", "红安县", "城关镇", "罗田县", "凤山镇", "英山县"]
}
]
}
]
},
{
name: '华南地区',
province: [
{
name: '广东省',
city: [
{
name: "广州市",
districtAndCounty: ["越秀区", "荔湾区", "海珠区", "天河区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "萝岗区"]
},
{
name: "深圳市",
districtAndCounty: ["福田区", "罗湖区", "南山区", "宝安区", "龙岗区", "盐田区"]
},
{
name: "清远市",
districtAndCounty: ["清城区", "英德市", "连州市", "佛冈县", "石角镇", "阳山县"]
},
{
name: "韶关市",
districtAndCounty: ["浈江区", "武江区", "曲江区", "乐昌市", "南雄市", "始兴县"]
}
]
},
{
name: '广西省',
city: [
{
name: "南宁市",
districtAndCounty: ["青秀区", "兴宁区", "江南区", "西乡塘区", "良庆区", "邕宁区", "武鸣县", "横县", "宾阳县", "上林县", "隆安县"]
},
{
name: "桂林市",
districtAndCounty: ["象山区", "叠彩区", "秀峰区", "七星区", "雁山区", "阳朔县", "阳朔镇", "临桂县", "临桂镇", "灵川县", "灵川镇"]
},
{
name: "柳州市",
districtAndCounty: ["城中区", "鱼峰区", "柳南区", "柳北区", "柳江县", "拉堡镇", "柳城县", "大埔镇"]
}
]
}
]
},
{
name: '西南地区',
province: [
{
name: '四川省',
city: [
{
name: "成都市",
districtAndCounty: ["青羊区", "锦江区", "金牛区", "武侯区", "成华区", "龙泉驿区", "青白江区", "新都区", "温江区"]
},
{
name: "广元市",
districtAndCounty: ["市中区", "元坝区", "朝天区", "旺苍县", "东河镇", "青川县", "乔庄镇", "剑阁县", "下寺镇", "苍溪县", "陵江镇"]
},
{
name: "绵阳市",
districtAndCounty: ["涪城区", "游仙区", "江油市", "三台县", "潼川镇", "盐亭县"]
},
{
name: "德阳市",
districtAndCounty: ["旌阳区", "什邡市", "广汉市", "绵竹市", "罗江县", "罗江镇", "中江县", "凯江镇"]
},
{
name: "南充市",
districtAndCounty: ["顺庆区", "高坪区", "嘉陵区", "阆中市", "南部县", "南隆镇"]
}
]
},
{
name: '贵州省',
city: [
{
name: "贵阳市",
districtAndCounty: ["乌当区", "南明区", "云岩区", "花溪区", "白云区", "小河区"]
},
{
name: "六盘水市",
districtAndCounty: ["钟山区", "盘县", "红果镇", "六枝特区", "平寨镇", "水城县"]
}
]
}
]
},
{
name: '西北地区',
province: [
{
name: '陕西省',
city: [
{
name: "西安市",
districtAndCounty: ["莲湖区", "新城区", "碑林区", "灞桥区", "未央区", "雁塔区"]
},
{
name: "延安市",
districtAndCounty: ["宝塔区", "延长县", "延川县", "延川镇", "子长县"]
},
{
name: "铜川市",
districtAndCounty: ["耀州区", "王益区", "印台区", "宜君县", "城关镇"]
}
]
},
{
name: '甘肃省',
city: [
{
name: "兰州市",
districtAndCounty: ["城关区", "七里河区", "西固区", "安宁区", "红古区", "永登县", "城关镇"]
},
{
name: "嘉峪关市",
districtAndCounty: ["金昌市", "金川区", "永昌县", "城关镇"]
}
]
}
]
},
{
name: '港澳台地区',
province: [
{
name: '香港',
city: [
{
name: "香港特别行政区",
districtAndCounty: ["中西区", "东区", "九龙城区", "观塘区", "南区", "深水埗区", "湾仔区", "黄大仙区", "油尖旺区"]
}
]
},
{
name: '澳门',
city: [
{
name: "澳门特别行政区",
districtAndCounty: ["澳门特别行政区"]
}
]
}
]
}
];
这个数据是用来测试的,不保证正确性。
我们在做一个实例的时候通常都会用静态的html将它实现一下,然后把静态的用js改造成动态的效果。
其html代码如下:
<div class="test"></div>
<div id="data-wrap">
<div id="national-all"></div>
<div class="area-mask"></div>
</div>
其主要的样式如下:
.test {
width: 100%;
height: 50px;
background-color: #F3F3F3;
}
#national-all {
font-size: 12px;
display: flex;
white-space: nowrap;
align-items: center;
padding-top: 14px;
padding-bottom: 14px;
box-shadow: 0px 0px 6px rgba(212,211,211,0.8);
}
#national-all #national-item::-webkit-scrollbar {
width: 0;
height: 0;
}
#national-all h3 {
margin-left: 15px;
margin-right: 8px;
}
#national-all #national-item {
padding-right: 10px;
font-size: 0;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
#national-all #national-item a {
font-size: 12px;
margin-left: 8px;
margin-right: 8px;
position: relative;
color: #59607b;
}
#national-all #national-item .icon-down:before {
position: absolute;
right: -12px;
top: 0px;
transform: scale(.7);
}
#national-all #national-item .on {
color: #3091F2;
}
#national-all #national-item .on.icon-down:before {
transform: scale(.7) rotate(180deg);
color: #3091F2;
}
#data-wrap {
font-size: 12px;
}
#data-wrap .area-mask {
position: absolute;
top: 335px;
left: 0;
height: 100%;
width: 100%;
opacity: 0.4;
background: rgba(0, 0, 0, 1);
display: none;
}
#data-wrap #area-wrap {
display: flex;
height: 240px;
}
#data-wrap #province-data {
color: #59607b;
display: inline-flex;
flex-direction: column;
width: 33.33%;
box-sizing: border-box;
}
#data-wrap #province-data a {
height: 40px;
line-height: 40px;
box-sizing: border-box;
margin-left: 15px;
border-bottom: 1px solid #f3f3f3;
}
#data-wrap #province-data a:last-child {
border-bottom: none;
}
#data-wrap .not-province {
color: #59607b;
display: inline-flex;
flex-direction: column;
width: 33.33%;
box-sizing: border-box;
padding-left: 15px;
background-color: #f3f3f3;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
#data-wrap .on {
color: #3091F2;
}
#data-wrap .not-province::-webkit-scrollbar {
width: 0;
height: 0;
}
#data-wrap .not-province a {
height: 40px;
line-height: 40px;
box-sizing: border-box;
border-bottom: 1px solid #ebebeb;
}
这个时间联动选择的实例主要是利用每个a标签的index属性与对应地区数据的key值是相等的,利用a标签的index值筛选出相应的地区数据,然后动态的创建html元素,将数据渲染出来。
JS代码如下:
window.onload = showAll();
var current = {
allId: '',
provinceId: ''
};
// 显示全部地区
function showAll() {
var allAreaH3 = $('<h3 id="national-title">全国地区</h3>');
$('#national-all').append(allAreaH3);
var nationalItemDiv = $('<div id="national-item"></div>');
$('#national-all').append(nationalItemDiv);
for (var i = 0; i < area.length; i++) {
var allA = $('<a class="icon-down" index="' + i + '">' + area[i]['name'] + '</a>');
nationalItemDiv.append(allA);
}
}
// 显示省
function showProvince(index) {
$('div').remove('#area-wrap'); // 删除id='area-wrap'的所有<div>元素
var areaWrap = $('<div id="area-wrap">');
$('#data-wrap').append(areaWrap);
var provinceData = $('<div id="province-data">');
for (var j = 0; j < area[index]['province'].length; j++) {
var proItemA = $('<a index="' + j + '">'+ area[index]['province'][j].name +'</a>');
provinceData.append(proItemA);
}
areaWrap.append(provinceData);
}
// 显示市县
function showCity(allId, proId) {
$('div').remove('#city-data');
var cityDataDiv = $('<div id="city-data" class="not-province"></div>');
for (var k = 0; k < area[allId]['province'][proId]['city'].length; k++) {
var cityItemA = $('<a index="' + k + '">'+ area[allId]['province'][proId]['city'][k].name +'</a>');
cityDataDiv.append(cityItemA);
}
$('#area-wrap').append(cityDataDiv);
}
// 显示地区
function showCounty(allId, proId, cityId) {
$('div').remove('#county-data');
var countyDataDiv = $('<div id="county-data" class="not-province"></div>');
for (var z = 0; z < area[allId]['province'][proId]['city'][cityId]['districtAndCounty'].length; z++) {
var countyItemA = $('<a index="' + z + '">'+ area[allId]['province'][proId]['city'][cityId]['districtAndCounty'][z] +'</a>');
countyDataDiv.append(countyItemA);
}
$('#area-wrap').append(countyDataDiv);
}
$('#data-wrap').on('click', '#national-item a', function () {
$(this).addClass('on').siblings('#national-item a').removeClass('on');
$('.area-mask').show();
var idx = $(this).attr('index');
current.allId = idx;
showProvince(idx);
}).on('click', '#province-data a', function () {
$(this).addClass('on').siblings('#province-data a').removeClass('on');
var proId = $(this).attr('index');
current.provinceId = proId;
showCity(current.allId, proId);
$('div').remove('#county-data');
}).on('click', '#city-data a', function () {
$(this).addClass('on').siblings('#city-data a').removeClass('on');
var cityId = $(this).attr('index');
showCounty(current.allId, current.provinceId, cityId);
}).on('click', '#county-data a', function () {
$(this).addClass('on').siblings('#county-data a').removeClass('on');
}).on('click', '.area-mask', function () {
$(this).hide();
$('#area-wrap').hide();
$('#national-item a').removeClass('on');
});
就这样,一个简单的移动端时间联动选择的动效就被我们做出来了。