基于eastui的二级联动

二级联动:

这里以城市为例,简单点说,就是先查找出来一个大城市,再根据id查找出二级城市。

直接见代码:

前端:

页面:

<input id="cc1" class="easyui-combobox" data-options="valueField: 'id',textField: 'name'" />
    <input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'name'" />

js:

$(function () {
    /*城市联动   record:选中的数据*/
    $("#cc1").combobox({
        url:"/test/city",
        onSelect:function (record) {
            console.info(record);
            $('#cc2').combobox('reload', "/test/mincity?id="+record.id);
        }
    });
})

后端代码,这里是模拟数据

    @RequestMapping("/city")
    @ResponseBody
    public List cities(){
        List<Object> list = new ArrayList<>();
        list.add(new City(1L,"成都"));
        list.add(new City(2L,"北京"));
        return  list;
    }
    @RequestMapping("/mincity")
    @ResponseBody
    public List mincity(Long id){
        List<Object> list = new ArrayList<>();
        if(id==1){
            list.add(new City(1L,"遂宁"));
            list.add(new City(2L,"南充"));
        }
        if(id==2){
            list.add(new City(1L,"北京1"));
            list.add(new City(2L,"北京2"));
        }

        return  list;
    }
发布了62 篇原创文章 · 获赞 2 · 访问量 4884
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览