一、引入和简单使用
1.1、引入
<link rel="stylesheet" href="formSelects-v4.css" />
<script src="layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//全局定义一次, 加载formSelects
layui.config({
base: '../src/' //此处路径请自行处理, 可以使用绝对路径
}).extend({
formSelects: 'formSelects-v4'
});
//加载模块
layui.use(['jquery', 'formSelects'], function(){
var formSelects = layui.formSelects;
});
</script>
1.2、获取选中数据
/**
* 1.获取选中数据
* formSelects.value(ID, TYPE);
* @param ID xm-select的值
* @param TYPE all | val | valStr | name | nameStr
*/
var formSelects = layui.formSelects;
formSelects.value('select1'); // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value('select1', 'all'); // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value('select1', 'val'); // ["2","4"]
formSelects.value('select1', 'valStr'); // 2,4
formSelects.value('select1', 'name'); // ["上海","深圳"]
formSelects.value('select1', 'nameStr'); // 上海,深圳1.3、设置select的选中值
/**
* 设置select的选中值
* formSelects.value(ID, ARR);
* @param ID xm-select的值
* @param ARR value数组
*/
var formSelects = layui.formSelects;
formSelects.value('select1', [2, 4]); // 选中value为2和4的option → 上海,深圳1.4、追加或删除select的选中值
/**
* 追加或删除select的选中值
* formSelects.value(ID, ARR, isAppend);
* @param ID xm-select的值
* @param ARR value数组
*/
var formSelects = layui.formSelects;
formSelects.value('select1', [2, 4], true); // 追加value为2和4的option, 如果该值已选中则跳过, 该值未选中则选中
formSelects.value('select1', [2, 4], false);// 删除value为2和4的option, 如果该值没有选中则跳过, 该值被选中则取消选中1.5、监听select的选中与取消
/**
* 1.监听select的选中与取消
* formSelects.on(ID, Function);
* @param ID xm-select的值
* @param Function 自定义处理方法
* @param isEnd 是否获取实时数据, true/false
*/
formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){
//id: 点击select的id
//vals: 当前select已选中的值
//val: 当前select点击的值
//isAdd: 当前操作选中or取消
//isDisabled: 当前选项是否是disabled
}, true);1.6、下载地址
下载地址： GitHub - hnzzmsf/layui-formSelects: Layui select多选小插件
二、实例
<!DOCTYPE html>
<html>
<head>
<title>通道</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- layui -->
<link href="layui/css/layui_base.css" rel="stylesheet">
<script type="text/javascript" src="layui/layui.js"></script>
<!-- jquery -->
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<!-- 多选框 -->
<link rel="stylesheet" type="text/css" href="js/formSelects-v4.css" />
<script src="js/formSelects-v4.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<label class="layui-form-label">通道1</label>
<div class="layui-inline">
<select name="logicalChannel" xm-select-show-count="1" xm-select="logicalChannel"></select>
</div>
</body>
<script>
var arr = [
{ version: '通道 1', totalCont: 1 },
{ version: '通道 2', totalCont: 2 },
{ version: '通道 3', totalCont: 3 },
{ version: '通道 4', totalCont: 4 },
{ version: '通道 5', totalCont: 5 },
{ version: '通道 6', totalCont: 6 },
{ version: '通道 7', totalCont: 7 },
{ version: '通道 8', totalCont: 8 }
];
let formSelects;
// 设置 报警类型 的选项
function setSelects(key, list, flag) {
let mapGroup = new Map();
var lists = [];
for (var i = 0; i < list.length; i++) {
var value = list[i].version;
var total = list[i].totalCont;
lists.push({ "name": value, "value": total });
}
formSelects = layui.formSelects;
formSelects.data(key, 'local', {
arr: lists
});
let values = mapGroup.get(key);
if (values != null && values.length > 0) {
let checks = [];
for (var i = 0; i < values.length; i++) {
checks.push(values[i].value);
}
formSelects.value(key, checks);
}
}
setSelects('logicalChannel', arr, true);
formSelects.on('logicalChannel', function(id, vals, val, isAdd, isDisabled){
//id: 点击select的id
//vals: 当前select已选中的值
//val: 当前select点击的值
//isAdd: 当前操作选中or取消
//isDisabled: 当前选项是否是disabled
console.log(id)
console.log(vals)
console.log(val)
}, true);
</script>
</html>