layui框架中利用xm-select实现下拉多选功能,以及如何设置默认值

xm-select.js的下载地址:https://gitee.com/maplemei/xm-select/tree/master/dist

引入xm-select.js

<script src="/static/tools/pear/component/pear/xm-select.js"></script>

 dom元素

<div id="doors"></div>

 layui中使用

layui.use(['form', 'jquery', 'select'], function () {
            let form = layui.form;
            let $ = layui.jquery;


            let select_arr = [];
            let xmselect_dom;

            // 初始化多选下拉框
            xmselect_dom = xmSelect.render({
                el: '#doors',  // 选择器
                name: 'doors',       // input name 
                max: 2,
                data: []
            });

 动态渲染并给默认选中值

$.ajax({
                url: "{:url('user/get_xiu_door')}",
                data: {
                    staffid: staffid,
                    areaid: areaid
                },
                dataType: 'json',
                type: 'post',
                success: function (res) {
                    console.log(res);
                    let arr = []
                    let arr0 = []
                    for (let i = 0; i < res.length; i++) {
                        const element = res[i];
                        if (!element.staff && !element.staff1 && !element.staff) {
                            arr.push({ name: element.num, value: element.id })
                        } else {
                            arr.push({ name: element.num, value: element.id })
                            arr0.push(element.id)
                        }
                    }
                    select_arr = arr
                    console.log(arr);
                    // 初始化多选下拉框
                    xmselect_dom = xmSelect.render({
                        el: '#doors',  // 选择器
                        name: 'doors',       // input name 
                        max: 2,
                        data: select_arr, //下拉的数据
                        initValue: arr0   //默认选中的值 如:[6,7]
                    });
                }
            })

  

posted @ 2025-01-02 14:02  冥·紫月  阅读(2075)  评论(0)    收藏  举报