layui中的下拉多选框(赋值取值回显)

效果图:
下拉框中的不同的选项
代码示例

页面准备一个div用来放置下拉框

 <div class="layui-form-item">
        <label class="layui-form-label">多选下拉框</label>
        <input type="hidden" id="studentIds">
        <div class="layui-input-block" id="studentIds_box">



        </div>
    </div>

1. layui引入多级下拉(js引入)

layui.config({
    base: "/layui-template/js/"
}).extend({
    xmSelect: 'xm-select',
    insertSelect: 'InsertSelect'
}).use(['form', 'jquery', 'xmSelect'], function () {

    var xmSelect = layui.xmSelect;  // 必须声明

}  

2. 初始化多选下拉框

var studentIds_box = xmSelect.render({
        el: '#studentIds_box',
        name: 'studentIds', // 这个name属性为layui在页面加载出来的下拉框input的name属性(红圈中做了修改  passageIds 即为 studentIds )
        prop: {
            name: 'name',// 这个属性为返回的数据集合中需要放置在页面上的键 例如 AA就是name的属性值
            value: 'id'
        },
        toolbar: {
            show: true,
            list: ['ALL', 'CLEAR', 'REVERSE']
        },
        filterable: true,
        paging: true,
        autoRow: true,
        data: []
    });
  

 var old = {
        studentIds: [],
    };
    // 这一个不是必要的

// js为下拉框中的多选数据赋值
  function getList(siteId, callback) {
        $.get('/****/list/all', {'data': JSON.stringify({'siteId': siteId})}, function (result) {
            if (result['status'] == 1001) {
                var list= result.result;
                typeof callback == "function" && callback(list);
               
            }
        });
    }
    // 刷新下拉框显示数据 好像是类似于 from.render吧
 function setIdsBoxHtml(list) {
        passageIds_box.update({
            data: list
        });
    }

// 回调赋值
    getList(data.value, function (list) {
            setPassageIdsBoxHtml(list);

            //渲染已绑定的工作人员通道
            $.get('/***/***/alreadyBindIng?id=1', {
                "aaa": true // 请求的参数
            }, function (result) {
                var list = result.result;
                var value = [];
                if (list && list.length > 0) {
                    for (var i in list) {
                        value.push(list[i].id);
                    }
                }
                old.specialeIds = value;
                
                studentIds_box.setValue(value);// 用于回显赋值
            });
        });

// 提交 取值
 		data.field.studentIds = studentIds _box.getValue('value');
        if (data.field.studentIds .join(",") == old.studentIds.join(",")) {
            data.field.studentIds = null;
        }

		......

		var save = JSON.stringify(data.field);
        //弹出loading
        var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
        $.post('/****/***/save', {'data': save }, function (result) {
        ...
		}

// java数据接收  
// 实体中添加集合属性即可接收 private List<Integer> studentIds;

  	@ResponseBody
    @PostMapping("/save")
    public Object save(String data){
       // 多选下拉框中的数据在页面用list接收
		Student  req = JSON.parseObject(data, Student.class);
		List<Integer> list = req.getStudentIds();
		... //即可拿到下拉框中的所选数据