Skip to main content

监听选择

xmSelect.render({
on: function(data){
//arr: 当前多选已选中的数据
var arr = data.arr;
//change, 此次选择变化的数据,数组
var change = data.change;
//isAdd, 此次操作是新增还是删除
var isAdd = data.isAdd;

//可以return一个数组, 代表想选中的数据
//return []
},
})

实时监听

实时监听多选的选中状态变化

<div id="demo1" class="xm-select-demo"></div>

<br/><br/>
<button class="btn" id="setValue1">监听setValue(['zhangsan'], null, true)</button>
<button class="btn" id="setValue2">不监听setValue(['zhangsan'])</button>

<script>
var demo1 = xmSelect.render({
el: '#demo1',
on: function(data){
//arr: 当前多选已选中的数据
var arr = data.arr;
//change, 此次选择变化的数据,数组
var change = data.change;
//isAdd, 此次操作是新增还是删除
var isAdd = data.isAdd;

alert('已有: '+arr.length+' 变化: '+change.length+', 状态: ' + isAdd)
},
data: [
{name: '张三', value: 'zhangsan', selected: true},
{name: '李四', value: 'lisi', selected: true},
{name: '王五', value: 'wangwu'},
]
})

document.getElementById('setValue1').onclick = function(){
demo1.setValue(['zhangsan'], null, true);
}

document.getElementById('setValue2').onclick = function(){
demo1.setValue(['zhangsan']);
}
</script>

监听+动态赋值

选中北京后, 不能选中上海, 二者互斥

<div id="demo2" class="xm-select-demo"></div>

<script>
var demo2 = xmSelect.render({
el: '#demo2',
toolbar: {
show: true
},
on: function(data){
//arr: 当前多选已选中的数据
var arr = data.arr;
//change, 此次选择变化的数据,数组
var change = data.change;
//isAdd, 此次操作是新增还是删除
var isAdd = data.isAdd;

console.log(arr);

if(isAdd){
var item = change[0];
var index = arr.findIndex(i => i.mutex == item.mutex && i.value != item.value);
if(index != -1){
arr.splice(index, 1);
}
}
},
data: [
{name: '北京', value: 1, mutex: 1, selected: true},
{name: '上海', value: 2, mutex: 1},
{name: '广州', value: 3},
]
})
</script>

监听+动态修改

有时全选也是一种状态, 列表中有全选, 与其他选项互斥

<div id="demo3" class="xm-select-demo"></div>

<script>
var demo3 = xmSelect.render({
el: '#demo3',
on: function(data){
//可以return一个数组, 代表想选中的数据

//arr: 当前多选已选中的数据
var arr = data.arr;
//change, 此次选择变化的数据,数组
var change = data.change;
//isAdd, 此次操作是新增还是删除
var isAdd = data.isAdd;

if(isAdd){
var allItem = change.find(function(item){
return item.value === 0;
})
if(allItem){
return [allItem];
}
allItem = arr.find(function(item){
return item.value === 0;
})
if(allItem){
return change;
}
}

},
data: [
{name: '全选', value: 0},
{name: '北京', value: 1},
{name: '上海', value: 2},
{name: '广州', value: 3},
{name: '深圳', value: 4},
]
})
</script>