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

2025-10-22前端开发
369

我们要实现下拉多选,可以利用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>
The End
layui layui下拉

相关推荐

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="...
2025-10-22 前端开发
369

layui刷新当前页面的方法总结
本站总结了layui刷新当前页面的各种方法,希望能够帮到需要的朋友: 1、编辑成功后刷新父页面,代码如下: $.ajax({type: "POST",url: "${base}/pm/pmshiftEditList",data: $("#form").serialize(),//将对象序列化成JSON字符串success: function(res) {if (res.success) {parent.layer....
2025-10-22 前端开发
420

layui如何实现全局排序切换
layui默认提供有sort排序,但是仅针对当前页面中的数据,无法实现全局数据的排序,如果需要全局排序,需要后台程序支持才可以实现。 可以在layui触发排序事件上改进下。 本功能必须配合后台程序否则无效。 实现方法 table格式这么写: table...
2025-10-19 前端开发
293

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167