layui风格下拉多选
xm-select 文件在我的资源里面有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./xm-select.js"></script>
<title>Document</title>
</head>
<body>
<div class="layui-row">
<div id="demo1" class="xm-select-demo"></div>
<pre id="demo1-value"></pre>
</div>
</body>
</html>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
language: 'zn',
data: [
{ name: '张三', value: 1 },
{ name: '李四', value: 2 },
{ name: '王五', value: 3 },
{ name: '王64565五', value: 4 },
{ name: '王34534五', value: 5 },
{ name: '王3545五', value: 6 },
{ name: '王543五', value: 7 },
{ name: '王4五', value: 8 },
{ name: '王3五', value: 9 },
{ name: '王1五', value: 10 },
{ name: '王2五', value: 11 },
]
});
//更新下拉多选框默认的文本
demo1.update({
tips: '请选择需要备份的分区'
});
var selectArr = demo1.getValue();
//判断下拉多选框中是否有选项
if (selectArr.length == 0) {
alert('备份分区未选择');
}
//遍历下拉多选框所有选项
else {
var valuesArr = [];
for (var i = 0; i < selectArr.length; i++) {
valuesArr.push(selectArr[i].value);
}
//对数据进行处理
console.log(valuesArr);
}
</script>