2021-09-23 工作记录--LayUI-selectM实现下拉菜单多选（但不可搜索）

一、LayUI-selectM实现下拉菜单多选（但不可搜索）

结果：

第一步、需要下载selectM.js

【下载地址：https://dev.layuion.com/extend/selectN,selectM/#doc】

第二步、引入selectM.js

<script src="项目中放selectM.js的地址"></script>

第三步、代码

HTML：

对应代码：

<div class="layui-input-block" style="margin-left:4px;float: left; ">
   <div id="schoolList"></div>
</div>

JS：【紫色下划线和紫色框框里、绿色框框里的内容】

【注意：颜色相同的相对应】

对应代码：

var tagData = {:json_encode($schoolInfo)};

对应代码：

layui.use('selectM',function () {
    var selectM = layui.selectM;
    var tagIns2 = selectM({
      // 元素容器【必填】
      elem: '#schoolList'
      
      // 候选数据【必填】s
      ,data: tagData
      
      // 默认值
      ,selected: []
      ,tips: '选择校区'
      // 最多选中个数，默认5
      ,max: 20
      
      // input的name 不设置与选择器相同(去#.)
      ,name: 'tag2'
      
      // 值的分隔符
      ,delimiter: ','
      
      // 候选项数据的键名
      ,field: {idName: 'id',titleName: 'title'}
    })
  })

在HTML里面输入{:dump($schoolInfo)}，如下图所示可以看到候选项数据对应的键名分别是id和title，所以上面中最后一项里填入id和title

假如搜索重载时，传该数据的写法：

对应代码：

school: tagIns2.values.toString(), // 这儿的school是需要传到后台的校区数据的字段名