layui 插件 xm-select的使用

如图 select多选联动

前端代码定义如下：
html
1、引入插件

<script type="text/javascript" src="/js/plugins/layui/xm-select.js"></script>

2、定义界面

<span>省：</span><div id="demo" name="demo" class="xm-select-demo"></div>
<span>市：</span><div id="demo2" name="demo2" class="xm-select-demo"></div>

3、数据初始化

<script type="text/javascript">
    $(function (){
        demo();
        demo2(null);
    });
    function demo() {
        let data = {"current": 1, "size": 500};
        let demoData = [];
        let demoCode =null;
        //下拉框
        $.ajax({
            url: 'demo/list',
            dataType: 'json',
            type: 'get',
            data: data,
            success: function (r) {
                if (r) {
                    $.each(r, function (index, item) {
                        let obj = {name: item.code + " " + item.name, value: item.code};
                        demoData.push(obj);
                    });
                    demoCode = xmSelect.render({
                        el: '#demo',
                        filterable: true,
                        theme: {
                            color: '#1c84c6',
                        },
                        toolbar: {
                            show: true,
                            list: ['ALL', 'CLEAR', 'REVERSE']
                        },
                        model: {
                            label: {
                                type: 'block',
                                block: {
                                    //最大显示数量, 0:不限制
                                    showCount: 1,
                                    //是否显示删除图标
                                    showIcon: true,
                                }
                            }
                        },
                        searchTips: '直接选择或搜索选择',
                        hide() {
                            let arr =demoCode.getValue('value');
                            demo2(arr);
                        },
                        data: demoData,
                    });
                }
            }
        });
        return demoCode;
    }
    function demo2(arr) {
        let condition = {
            "demos": arr,
        };
        let demo2Act = null;
        let data = {"condition": JSON.stringify(condition)};
        $.ajax({
            url: 'demo2/list',
            dataType: 'json',
            type: 'get',
            data: data,
            success: function (r) {
                if (r) {
                   demo2Act = xmSelect.render({
                        el: '#demo2',
                        filterable: true,
                        theme: {
                            color: '#1c84c6',
                        },
                        model: {
                            label: {
                                type: 'block',
                                block: {
                                    //最大显示数量, 0:不限制
                                    showCount: 1,
                                    //是否显示删除图标
                                    showIcon: true,
                                }
                            }
                        },
                        toolbar: {
                            show: true,
                            list: ['ALL', 'CLEAR', 'REVERSE']
                        },
                        searchTips: '直接选择或搜索选择',
                        data: r,
                    });
                }
            }
        });
        return demo2Act;
    }
</script>

注意在其他调用js里面使用时需重新初始化数据

后端代码块

 @ResponseBody
    @GetMapping("/list")
    public List<Province> list(@RequestParam Map<String, Object> params) {
        return provinceService.list(params);
    }

  @Override
    public List<Province> selectList(Map<String, Object> params) {
        try {
            List<Province> list = provinceDao.list(params.get("condition"));
            return list ;
        } catch (Exception e) {
            log.error("列表查询异常，原因=【{}】", e);
            return null;
        }
    }

 @ResponseBody
    @GetMapping("/list")
    public List<City> groupList(@RequestParam Map<String, Object> params) {
        return cityService.groupList(params);
    }

 @Override
    public List<City> groupList(Map<String, Object> params) {
        try {
       
        List<City> cityList = cityDao.list(params.get("condition"))
        return groupByName(cityList );
        } catch (Exception e) {
            log.error("列表查询异常，原因=【{}】", e);
            return null;
        }
    }

    private List<City> groupByName(List<City> cityList){
        List<City> list = new ArrayList<>();
        if (CollectionUtils.isEmpty(cityList)){
            return list;
        }
        Map<String,List<city>> map = cityList.stream().filter(e -> StringUtils.isNotBlank(e.getName())).collect(Collectors.groupingBy(item -> item.getName()));
            Iterator<Map.Entry<String,List<City>>> entryIt = map.entrySet().iterator();
            while (entryIt.hasNext()) {
                City city= new City();
                Map.Entry<String,List<City>> entity = entryIt.next();
                List<JSONObject> objectList = new ArrayList<>();
                List<City> newList = entity.getValue();
                newList .forEach(city-> {
                    JSONObject obj = new JSONObject();
                    obj.put("name",StringUtils.join(city.getName(),city.getCode()));
                    obj.put("value",city.getCode());
                    objectList.add(obj);
                });
                String Name = entity.getKey();
                city.setName(name);
                city.setChildren(objectList);
                list.add(city);
            }
            return list;
    }

以上个人拙见，仅供参考！
数据插件提取地址
链接：https://pan.baidu.com/s/1B01Gt3SdKPETai6wcojuaA
提取码：tkbt