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([]);

相关推荐
掘金安东尼8 分钟前
使用 Web Components 与 CSS Modules 构建原生应用架构
javascript·后端·面试
前端小巷子29 分钟前
Vue 逻辑抽离全景解析
前端·vue.js·面试
excel38 分钟前
前端事件机制入门到精通:事件流、冒泡捕获与事件委托全解析
前端
Moment1 小时前
Next.js 15.5 带来 Turbopack Beta、Node 中间件稳定与 TypeScript 强化 🚀🚀🚀
前端·javascript·react.js
yzzzzzzzzzzzzzzzzz1 小时前
初识javascript
前端·javascript
excel2 小时前
硬核 DOM2/DOM3 全解析:从命名空间到 Range,前端工程师必须掌握的底层知识
前端
专注API从业者9 小时前
Python + 淘宝 API 开发:自动化采集商品数据的完整流程
大数据·运维·前端·数据挖掘·自动化
你的人类朋友10 小时前
【Node&Vue】JS是编译型语言还是解释型语言?
javascript·node.js·编程语言
烛阴10 小时前
TypeScript高手密技:解密类型断言、非空断言与 `const` 断言
前端·javascript·typescript
样子201811 小时前
Uniapp 之renderjs解决swiper+多个video卡顿问题
前端·javascript·css·uni-app·html