标题xmSelect插件:
xmSelect文档
下载Layui第三方插件
下拉多选框效果:
实现方法(例子):
将xmSelect插件的xm-select.js文件引入到layui中:文章来源:https://www.toymoban.com/news/detail-612364.html
<script src="public/js/xm-select/xm-select.js"></script> //xm-select.js文件所在目录
使用方法:
HTML:文章来源地址https://www.toymoban.com/news/detail-612364.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);
}
到了这里,关于Layui下拉多选框的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!