下拉穿梭框

layui transfer

sass

//css调整部分
xm-select .scroll-body{
	padding-left: 10px;
	overflow: hidden;
}

html


<div id="demo1" style="width: 502px;"></div>

<script>

var list = [
	{value: "1", title: "李白" },
	{value: "2", title: "杜甫" },
	{value: "3", title: "贤心" },
]

var initValue = ["1"]

var demo1 = xmSelect.render({
	el: '#demo1', 
	content: "<div id='transfer'></div>",
	height: 'auto',
	autoRow: true,
	initValue: initValue,
	data: list,
	prop: { name: 'title' },
	on: function(data){
		if(!data.isAdd){
			layui.transfer.reload('transfer', {
				value: demo1.getValue('value')
			})
		}
	}
})

layui.transfer.render({
	id: 'transfer',
	elem: '#transfer',  //绑定元素
	title: ['候选人', '获奖者'],
	data: list,
	value: initValue,
	onchange: function(data, index){
		if(index == 0){
			demo1.append(data)
		}else{
			demo1.delete(data)
		}
	}
});


//这里仅仅提供一个演示, 更多的想法由你自己来创造

</script>

下拉穿梭框 ​

layui transfer ​

下拉穿梭框

layui transfer