Layui 下拉select多选实现

1. html

<div id="mo_deptment"></div>

2.引用

<script src="~/layuiadmin/layui/xm-select.js"></script>
3.设置全局变量存储控件

var mo_deptmentSelect;

4.layui.use 中初始化

4.1 列表数据

var mo_deptmentdata = [

{name: '综合室', value: '综合室'},//, selected: true

{name: '质控信息室', value: '质控信息室'},

{name: '实验分析室', value: '实验分析室'},

{name: '监测应急室', value: '监测应急室'},

{name: '放射源安全室', value: '放射源安全室'},

];

4.2 初始选择数据

var mo_deptment="综合室,质控信息室";

var sv = mo_deptment.split(',');

4.3 初始化

var mo_deptmentSelect = xmSelect.render({

el: '#mo_deptment',

language: 'zn',

initValue: sv,

data: mo_deptmentdata

});

5.获取选中数据

var selectArr = mo_deptmentSelect.getValue();

var sv = "";

$.each(selectArr,function(i,v){

if(i==selectArr.length-1) sv += v.name;

else sv += v.name+",";

});

6.清除选中数据 和设置选中数据

mo_deptmentSelect.setValue([]);

相关推荐
2501_915918415 分钟前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂1 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技1 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip1 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go2 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x2 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java2 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)2 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术3 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体