标题xmSelect插件:

xmSelect文档
下载Layui第三方插件

下拉多选框效果:

在这里插入图片描述

实现方法(例子):

将xmSelect插件的xm-select.js文件引入到layui中:

<script src="public/js/xm-select/xm-select.js"></script> //xm-select.js文件所在目录

使用方法:
HTML:

<div class="layui-row">
	<div id="demo1" class="xm-select-demo" ></div>
    <pre id="demo1-value"></pre>
</div>

JS:
var demo1 = xmSelect.render({
	el: '#demo1',
    language: 'zn',
    data: dataArr
});

//更新下拉多选框默认的文本
demo1.update({
    tips: '请选择需要备份的分区'
});

var selectArr = demo1.getValue();
//判断下拉多选框中是否有选项
if (selectArr.length == 0) {
    layui.layer.alert('备份分区未选择', { icon: 5 });
}

//遍历下拉多选框所有选项
else {
    var valuesArr = [];
    for (var i = 0; i < selectArr.length; i++) {
        valuesArr.push(selectArr[i].value);
    }
    //对数据进行处理
    console.log(valuesArr); 
}
                
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐