移动端时间联动选择实例

版权声明：可任意转载，转载注明出处。 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');
});

就这样，一个简单的移动端时间联动选择的动效就被我们做出来了。