【Jquery】省市区三级联动插件 ：Distpicker以及使用自定义数据库数据

Distpicker主要用来进行表单的省市区三级联动。

1.参考地址

Git：https://github.com/fengyuanchen/distpicker
演示：http://www.jq22.com/yanshi8054

2.效果示例

3.引用代码

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/distpicker.js"></script>

distpicker依赖于jquery，所以必须添加

4.select区域代码

<div id="distpicker"  data-province="${回显省}" data-city="${回显市}" data-district="${回显区}">
  <select></select>
  <select></select>
  <select></select>
</div>

可根据需要添加id等属性，在对应区域填写回显内容即可回显后台数据

5.初始化代码

$("#distpicker").distpicker();

6.参数调整

在distpicker.js中可以设定默认参数对控件进行调整

  var DEFAULTS = {
    // 是否当省改变时自动选择市和区.
    // 0 -> 关闭自动选择
    // 1 -> 只自动选择省
    // 2 -> 自动选择省和市
    // 3 -> 自动选择省和市和区
    autoselect: 0,
    // 是否显示占位文本.
    placeholder: true,
    // 设置选择的值，可以选'name'或者'code'
    valueType: 'name',
    // 定义省份的初始值.
    province: '---- 选择省 ----',
    // 定义市的初始值.
    city: '---- 选择市 ----',
    // 定义区的初始值.
    district: '---- 选择区 ----'
  };

7.数据转换

由于Distpicker数据是在js里面固定的，如果需要使用后台的数据，需要对查询到的数据进行转换成JSON才能使用

public class TestJson {

    public static void main(String[] args) {
        List<HashMap> arealist = new ArrayList<>();

        HashMap<String, String> hm1 = new HashMap<>();
        hm1.put("CODE", "520000");
        hm1.put("NAME", "贵州省");
        hm1.put("REGION_LEVEL", "2");
        hm1.put("PARENT_NAME", "");
        hm1.put("PARENT_CODE", "");
        arealist.add(hm1);

        HashMap<String, String> hm2 = new HashMap<>();
        hm2.put("CODE", "230900");
        hm2.put("NAME", "七台河市");
        hm2.put("REGION_LEVEL", "3");
        hm2.put("PARENT_NAME", "黑龙江省");
        hm2.put("PARENT_CODE", "230000");
        arealist.add(hm2);

        HashMap<String, String> hm3 = new HashMap<>();
        hm3.put("CODE", "232700");
        hm3.put("NAME", "大兴安岭地区");
        hm3.put("REGION_LEVEL", "3");
        hm3.put("PARENT_NAME", "黑龙江省");
        hm3.put("PARENT_CODE", "230000");
        arealist.add(hm3);

        HashMap<String, HashMap> areares = new HashMap<>();

        for (HashMap area : arealist) {
            //获取存入DISTRICTS的Map
            HashMap tmp = new HashMap<String, String>();
            tmp.put(area.get("CODE"), area.get("NAME"));

            if (area.get("REGION_LEVEL").toString().equals("2")) {   //当属于第一级时
				area.put("PARENT_CODE","100000");
			}

			if (areares.containsKey(area.get("PARENT_CODE"))) {
				areares.get(area.get("PARENT_CODE")).put(area.get("CODE"), area.get("NAME"));
			} else {
				areares.put((String)area.get("PARENT_CODE"), tmp);
			}

        JSONObject DISTRICTS = JSONObject.fromObject(areares);
        System.out.println(DISTRICTS);

    }
}

转换结果：