php xmSelect使用

实现多下拉多选择 使用 xmSelect

该插件的网址为  xm-selecthttps://maplemei.gitee.io/xm-select/#/component/install

 下载该插件 引用到框架中

<script src="__ROOT__/static/plugs/jquery/xm-select.js" type="text/javascript" charset="utf-8"></script>

使用方法

<div class="layui-form-item">
    <label class="layui-form-label label-required">指定赛项</label>
    <div class="layui-input-block">
        <div class="xm-select-demo" name=contest_id id="demo2" style="width: 500px;"></div>
    </div>
    <input type=hidden name=contest_id   id="contest_id" value='' style=""/>
</div>

datas= res.data  ajax传来的json数据
var demo2 = xmSelect.render({
    el: '#demo2',
    data: datas,
    direction: 'down',
    filterable: true,
    autoRow: true,
    clickClose: true,
    toolbar: {show: true},
    on: function(data) {
        //这里是数据回调可用卓其他数据处理，
        //比如我这里是物料的单价另外显示在其他div中
        //点击选中的下拉列表中的值能获取到，用作其他处理
        var arr = data.arr;
        var str2 =[];
        if (arr.length > 0) {
            for (let i = 0; i < arr.length; i++) {
                str2.push(arr[i].id);
            }
        }
        $("#contest_id").val(str2);
    }

})