当前位置:首页 > 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

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

点赞 3

联系
顾问

在线
客服
账号登录

没有账号?立即注册

忘记密码

登录即同意用户协议没有账号? 立即注册
账号注册
我已阅读并同意用户协议
立即注册
注册即同意用户协议已有账号? 立即登录
找回密码

操作步骤:邮箱验证->设置新密码

注册即同意用户协议已有账号? 立即登录