layui Xm-Select下拉框多选带搜索

原创已于 2022-03-15 11:03:05 修改 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

于 2022-03-10 17:00:03 首次发布

该博客介绍了如何在HTML页面中使用layui库创建一个下拉树选择器，展示学校名称，并提供了JavaScript代码示例。通过点击按钮，可以获取并打印选中的学校ID列表。涉及的技术包括layui的xmSelect组件、数据渲染和事件监听。

先来一张效果图吧：
在这里插入图片描述

html部分代码：

 <div class="layui-inline" style="margin:2% 0;">
                    <label class="layui-form-label " style="border: none; background-color: transparent; ">学校名称:</label>
                    <div class="layui-input-inline">
                        <div id="SchoolId" class="xm-select-demo" style="width:350px !important;">

                        </div>
                    </div>
                </div>

js部分代码：

 
<script type="text/javascript">

    var SchoolList =@Html.Raw(ViewBag.SchoolList);//导出字段名称集合

   
     
    layui.config({
        base: "/js/layui-exts/"
    }).extend({ xmSelect: 'xm-select' }).use(['xmSelect',"element", "form", "table", "excel", "layer", "laydate"], function () {

        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            laydate = layui.laydate,
            element = layui.element,
            excel = layui.excel;
        var xmSelect = layui.xmSelect;


        var treeschool = xmSelect.render({
            el: '#SchoolId',
            autoRow: false,
            filterable: true,
            tree: {
                show: true,
                showFolderIcon: true,
                showLine: true,
                indent: 20,
                expandedKeys: true,
            },
            toolbar: {
                show: true,
                list: ['ALL', 'REVERSE', 'CLEAR']
            },
            filterable: true,
            height: '400px',
            data: SchoolList,//数据集   数据样式  [{value:值,name:文本内容},{value:值,name:文本内容},{value:值,name:文本内容}]
        });

        

       

        $("#WholeExport").click(function ()
        {
        //获取选中value集合
            let SchoolIdList = treeschool.getValue('value');
            console.log(SchoolIdList);
           
       
            return false;
        });


    })
</script>