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

相关推荐
南方kenny3 分钟前
用HTML+CSS+JS复刻了水果忍者——Vibe Coding活动摸鱼实录
前端·aigc·vibecoding
&白帝&7 分钟前
vue中常用的api($set,$delete,$nextTick..)
前端·javascript·vue.js
要加油哦~12 分钟前
vue | async-validator 表单验证库 第三方库安装与使用
前端·javascript·vue.js
阿酷tony25 分钟前
视频点播web端AI智能大纲(自动生成视频内容大纲)的代码与演示
前端·人工智能·视频ai·视频智能大纲·ai智能大纲
小李小李不讲道理35 分钟前
「Ant Design 组件库探索」三:Select组件
前端·javascript·react.js
二闹35 分钟前
TypeScript核心玩法,顺便附赠面试通关秘籍!
前端·typescript
雾林小妖37 分钟前
Layui的table实现鼠标移入单元格后tips弹框提示
layui·tips·table内容弹框显示
诗和远方149395623273438 分钟前
KSCrash中僵尸对象监控原理与实现
前端
XXXFIRE38 分钟前
前端必学:💻Mac + Nginx 部署 Vue3 静态项目
运维·前端
aiweker40 分钟前
python web开发-Flask 重定向与URL生成完全指南
前端·python·flask