使用xm-select实现下拉多选

xmSelect是LAYUI的下拉多选解决方案 1.多选, 单选, 重复选 2.分组, 远程搜索, 本地搜索, 分页 3.自定义主题, 工具条 4.下拉树，下拉任意 ... 让下拉选择变成一种艺术。

xm-select官网：https://xm-select.com/index.html

第一步：先引入JS

<script type="text/javascript" src="xm-select.js"></script>

注：无需额外引入CSS，作者已经将CSS嵌入到JS文件里了。

第二步：做一个隐藏域用于存放选择结果，做一个普通元素用于渲染下拉框

<!--隐藏域-->
<input type="hidden" name="zhuanti_ids" id="zhuanti_ids" value="" class="layui-input">

<!--下拉框-->
<div id="zhuanti" class="xm-select-demo"></div>

第三步：开始渲染，并且配合后端取值和赋值

<script>
var zhuanti = xmSelect.render({
    el: '#zhuanti', 
    language: 'zn',
    filterable:'true',
    //data是原始下拉列表，可以从后台直接assign过来，然后这里用volist循环一下，我这里只放几个演示数据
    data: [
      {name: '张三', value: 1},
	{name: '李四', value: 2},
	{name: '王五', value: 3},
    ],
    //这里主要监听（点击叉号删除了一个元素)
    on: function(data){
	    var ids = '';
	    $.each(data.arr, function(index, value) {
        ids = ids + value.value + ",";
      });
      //把修改后的值写入到文本框里
      $("#zhuanti_ids").val(ids.replace(/(^,)|(,$)/g,''));
    },
    //选择完成，下拉关闭回调->把最终的值写入到文本框里
    hide(){
       $("#zhuanti_ids").val(zhuanti.getValue("valueStr"));
    }
})
</script>