当前位置:首页 > LayUI > 关键词 > layui多选 > 正文

layui框架开发,基于xm-select实现下拉多选的方法

layui基于xm-select实现下拉多选的方法

layui官网目前虽已下线,但是应用依然很多,因为芝麻通网站源码板块行业字段存在一套模版归于多个行业的情况,所以对行业字段进行了升级,使用了xm-select来实现多选的效果。

layui基于xm-select实现下拉多选的方法

具体步骤

1.页面head中引入xm-select.js

<script type="text/javascript" src="/style/js/xm-select.js"></script>

2.前端渲染

<div id="demo1" class="xm-select-demo"></div>
<script>
var demo1 = xmSelect.render({
    el: '#demo1',
    language: 'zn',
    tips: '请选择行业',
    height: '360px',//高度
    paging: true,//分页
    filterable: true,//搜索
    autoRow: true,//自动换行
    pageSize: 10,//每页
    data: [
        {name: '张三', value: 1},
        {name: '李四', value: 2},
        {name: '王五', value: 3},
    ]
})
</script>

本文属原创,转载请注明原文:https://www.zhimatong.com/jiaocheng/821.html

为保证教程的实用性及扩大知识面覆盖,如果您有相似问题而未解决,可联系在线客服免费技术支持。

随手消灭0赞