可以动态添加、模糊搜索的单选下拉框插件formSelects

技术文档及插件下载链接:
https://hnzzmsf.github.io/example/example_v4.html#select_data
https://fly.layui.com/extend/formSelects/

用得不深,只分享基本功能相关代码,对于只要求单选、动态添加、模糊搜索的需求够用了
其他各种样式的多选啊、更换皮肤啊、远程搜索啊啥的大家就看官方文档吧。

先看实现效果:
可以动态添加、模糊搜索的单选下拉框插件formSelects_第1张图片

1、前端代码

//引入formSelects.css



2、JS代码


2、后台数据动态获取

//查询所有方案名称
@RequestMapping("findAllSchemes")
@ResponseBody
public List> findAllSchemes(){
    List schemes =  listDetailService.findAllSchemes();
    List> lists = new ArrayList<>();
    //数据串拼接
    for (String scheme: schemes){
        Map map = new HashMap<>();
        map.put("name",scheme);
        map.put("value",scheme);
        map.put("selected","");
        map.put("disabled","");
        lists.add(map);
    }
    System.out.println(lists.toString());
    return lists;
}

数据模型:
可以动态添加、模糊搜索的单选下拉框插件formSelects_第2张图片

你可能感兴趣的:(Layui)