下拉穿梭框

layui transfer

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

<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>