多选下拉框xmSelect

最新推荐文章于 2024-07-19 10:03:33 发布

工程师123456

最新推荐文章于 2024-07-19 10:03:33 发布

阅读量830

点赞数

分类专栏： layui 文章标签： js

本文链接：https://blog.csdn.net/qq_45473377/article/details/111646030

版权

layui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

Html

 <div class="layui-inline">
      <div id="payedEnum" class="xm-select-demo" style="width: 100%;display: inline-block;padding-right: 60px"></div>
</div>

js

引入xmSelect控件（使用的的layui的前端框架，项目导入xmSelect文件后配置vision 指向xmSelect地址，封装进layui后直接use）

layui.use(['table', 'jqbind','form','laydate','roomsearch','xmSelect'], function () {
var xmSelect=layui.xmSelect;
}

静态渲染data

var structureIdSelect = xmSelect.render({
        el: '#payedEnum',
        name: 'payedEnum',
        data: [
            {"name":"未支付","value":0},
            {"name":"部分支付","value":1},
            {"name":"已结清","value":2}
        ],
        tips:"支付状态",
        autoRow: true
    });

动态渲染data

var structureIdSelect = xmSelect.render({
            el: '#payedEnum',
            name: 'payedEnum',
            data: []
        });

        $.ajax({
            type: "GET",
            url: "v3/charge/getAllPayedEnum",
            dataType: "json",
            success: function(res){
                structureIdSelect.update({
                    data: res.data,
                    autoRow: true,
                })
            }
        });