## 监听选择


### 实时监听

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

:::demo 
```html
<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({ arr, change, 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>
```
:::


### 监听+动态赋值

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

:::demo 
```html
<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>
```
:::