省市区-三级联动通⽤化模块组件
都说我们要做模块化设计，⽽不要做功能化设计
什么是模块化设计，就是可插拔性⾼，组件化，想要就⽤，不要⽤拉倒，直接删除就⾏
什么是功能化设计，就是⼀个简单的功能，实现想要的效果，但是不够通⽤化，别⼈要⽤的话需要读懂你的代码，还需要复制黏贴很多代码这样效率不⾼
今天写了⼀个省市区三级联动的模块，写完后使⽤会⾮常⽅便，也很灵活
主要使⽤到的技术：jquery，redis，springMVC，MyBatis（springMVC和MyBatis⽆所谓，你⽤struts或者hibernate或者spring data都⾏）
⾸先页⾯引⼊js
1<script src="/js/jquery-2.2.4.min.js"></script>
2<script src="/cityselect/js/jquery.cityselect.js"></script>
HTML中写⼊3个div块，这是互斥的，div#id不同就可以做到模块化可插拔
1<div id="city">
2<select class="prov"></select>
3<select class="city" disabled="disabled"></select>
4<select class="dist" disabled="disabled"></select>
5</div>
6
7<div id="city2">
8<select class="prov"></select>
9<select class="city" disabled="disabled"></select>
10<select class="dist" disabled="disabled"></select>
11</div>
12
13<div id="city3">
14<select class="prov"></select>
15<select class="city" disabled="disabled"></select>
16<select class="dist" disabled="disabled"></select>
17</div>
初始化JS：
<script type="text/javascript">
/**
*
* @Description: 省市区三级联动api
* Copyright: Copyright (c) 2016
*
* ==============================
* 参数说明
* url：省市数据josn⽂件路径
* prov：默认省份
* city：默认城市
* dist：默认地区（县）
* nodata:⽆数据状态
* required：必选项
* ==============================
*
* @author leechenxiang
* @date 2016年6⽉16⽇下午3:46:58
* @version V1.0
*/
$(function(){
$("#city").citySelect({
prov:"江苏省",
city:"⽆锡市",
dist:"南长区",
jquery是什么功能组件required:false
});
$("#city2").citySelect({
nodata:"none",
required:false
});
$("#city3").citySelect({
nodata:"none",
required:false
});
});
</script>
后台controller：
1/**
2    *
3    * @Description: 获取所有的省市区列表
4    * @return
5    * @throws Exception
6    *
7    * @author leechenxiang
8    * @date 2016年6⽉16⽇上午11:22:10
9*/
10    @RequestMapping("/getCities")
11    @ResponseBody
12public CitiesDataResult getCities() throws Exception {
13        CitiesDataResult areas = AllCities();
14return areas;
15    }
service：
1 @Override
2public CitiesDataResult getAllCities() {
3// 取出缓存
4try {
5            String citiesDataResult = (REDIS_CITIES_KEY);
6if (!StringUtils.isBlank(citiesDataResult)) {
7                CitiesDataResult redisResult = JsonUtils.jsonToPojo(citiesDataResult, CitiesDataResult.class); 8return redisResult;
9            }
10        } catch (Exception e1) {
11            e1.printStackTrace();
12        }
13
14        List<AreaProvince> provinceList = ProvinceList();
15        List<Province> pList = new ArrayList<Province>();
16for (AreaProvince province : provinceList) {
17int provinceId = ProvinceId();
18            String provinceName = ProvinceName();
19
20            List<AreaCity> cityList = CityListBypId(provinceId);
21            List<City> cList = new ArrayList<City>();
22for (AreaCity city : cityList) {
23int cityId = CityId();
24                String cityName = CityName();
25
26                List<District> districtList = DistrictListBycId(cityId);
27
28                City c = new City();
29                c.setN(cityName);
30                c.setA(districtList);
31                cList.add(c);
32            }
33
34            Province p = new Province(provinceName, cList);
35            pList.add(p);
36        }
37
38        CitiesDataResult result = new CitiesDataResult();
39        result.setCitylist(pList);
40
41// 放⼊缓存
42try {
43            jedisClient.set(REDIS_CITIES_KEY, JsonUtils.objectToJson(result));
44        } catch (Exception e) {
45            e.printStackTrace();
46        }
47
48return result;
49    }
如果需要默认选中那么只需要对这3个参数赋值即可：
prov:"江苏省",
city:"⽆锡市",
dist:"南长区",
对于省市区的数据源，可以存放在数据库表中，也可以直接存⼊js，作为⼀个json来调⽤即可
如果没有省市区可以淘⼀下万能的X宝，可以参考如下链接，真的是太强⼤了，把省市区直接细化到了极致:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。