layui实现下拉框多选

引用layui第三方扩展实现下拉框选择渲染
第三方插件地址xmSelect下拉多选 xmSelect
实现效果
在这里插入图片描述

//第三方扩展插件
<script type="text/javascript" src="${ctx }/config/layui/dist/xm-select.js"></script>
//jquery渲染
<script type="text/javascript" src="${ctx}/config/jquery-3.5.1/jquery-3.5.1.min.js"></script>

 <div class="layui-input-inline" id="category" ></div>
        <!-- 添加一个隐藏的input元素，用来存储选中数据的value值 -->
        <input type="hidden" id="hiddenValue" name="category">

//category 是前端的渲染页面下拉框，
    // 创建一个下拉选择框，并设置相关属性
    var category = xmSelect.render({
        el: '#category', // 将下拉选择框挂载到id为category的元素上
        toolbar: {//开启单选则不需要头部工具栏
            show: true, // 显示工具栏
            list: [ 'ALL', 'CLEAR'] // 工具栏上的选项列表
        },
        theme: {
            color: '#51495f', // 设置主题颜色
        },
        filterable: true, // 允许筛选
        paging: true, // 启用分页
        // radio: true,//单选
        pageSize: 5,
        on: function (data) {
            //arr:  当前多选已选中的数据
            var arr = data.arr;
            // 从选中数据中提取value值
            var value = arr[0].value;
            console.log(arr);
            console.log(value);
            // 存储所选数据的值,这里是在前端隐藏了书籍类别输入框，将提出出来的值写入到表单中便于提交到数据库中
            document.getElementById('hiddenValue').value = value;//这里是将我自己需要的值返回到前端界面，再提交表单的时候不需要将数据转化，当然你也可以自己摸索一下
            // <input type="hidden" id="hiddenValue" name="category">

        },
        data: [] // 初始化数据为空数组
    })
    // 发送一个GET请求，从后端获取所有分类信息
    $.ajax({
        url: ctx + '/book/getAllCategories', // 请求的URL
        type: 'GET', // 请求类型为GET
        success: function (data) { // 请求成功后执行的回调函数
            // 将后端返回的数据转换为前端需要的格式
            var newData = data.map(function (item) {
                return {name: item.categoryName, value: item.cateId};
            });
            // 更新下拉选择框的数据
            category.update({data: newData});
        }, error: function (error) { // 请求失败后执行的回调函数
            console.log('Error fetching data from backend: ' + error); // 在控制台输出错误信息
        }
    })

controller:

   @RequestMapping("/getAllCategories")
    @ResponseBody
    public List<CategoryEntity> getAllCategories() {
        List<CategoryEntity> data = bookService.findAll();
        return data;
    }


service:
 List<CategoryEntity> findAll();

serviceimpl:
  @Override
    public List<CategoryEntity> findAll() {
        return categoryDao.findAll();
    }


dao：

 List<CategoryEntity> findAll();

  <select id="findAll" resultMap="cateMap"
            resultType="layui.library.manager.project.entity.CategoryEntity">
        SELECT *
        FROM tb_book_category
        order by cateId
    </select>