xm-select/docs/mds/XM13.md

显示与隐藏

主动打开/关闭下拉框

:::demo

<div id="demo1" class="xm-select-demo"></div>
<button class="btn" id="demo1-open">打开下拉框</button>
<button class="btn" id="demo1-close">关闭下拉框</button>

<script>
var demo1 = xmSelect.render({
	el: '#demo1', 
	data: [
		{name: '张三', value: 1},
		{name: '李四', value: 2},
		{name: '王五', value: 3},
	]
})


document.getElementById('demo1-open').onclick = function(){
	//这里延迟1S, 是因为, 点击下拉框外边的位置 会出发关闭事件, 所以延迟演示效果
	setTimeout(function(){
		demo1.opened();
	}, 1000);
}

document.getElementById('demo1-close').onclick = function(){
	//先点一下关闭, 然后把下拉框点开, 3S后会自动关闭
	setTimeout(function(){
		demo1.closed();
	}, 3000);
}
</script>

:::

监听打开/关闭下拉框

:::demo

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

<script>
var demo2 = xmSelect.render({
	el: '#demo2', 
	data: [
		{name: '张三', value: 1},
		{name: '李四', value: 2},
		{name: '王五', value: 3},
	],
	show(){
		alert('打开了')
	},
	hide(){
		alert('关闭了')
	}
})
</script>

:::