layui下拉多選

1.去layui下載多選插件

插件
原文檔

2.引用

<link rel="stylesheet" href="/static/layui-formSelects-master/dist/formSelects-v4.css" />

3.js

  <!--下拉多選-->
<script type="text/javascript">
    //全局定義一次, 加載formSelects
    layui.config({
        base: '/static/layui-formSelects-master/src/' //此處路徑請自行處理, 可以使用絕對路徑
    }).extend({
        formSelects: 'formSelects-v4'
    });

        //加載模塊
        layui.use(['jquery', 'formSelects','form'], function(){
            var formSelects = layui.formSelects,
                        form = layui.form;
            var id ='';
            form.on('select(aihao)', function(data){
                id=data.value
                $.get("{:url('work/student')}?id="+id,function (b) {
                    formSelects.data('select1', 'local', {
                        arr: b.msg
                    });
                })
            })
        });
</script>

4.html

 <div class="layui-form-item">
            <label class="layui-form-label">班級選擇</label>
            <div class="layui-input-block">
                <select name="class_id" lay-filter="aihao">
                    <option value=""></option>
                    {volist name="aa" id="class"}
                    <option class="opt" value="{$class.id}">{$class.name}</option>
                    {/volist}
                </select>
            </div>
        </div>


    <div class="layui-form-item">
        <label class="layui-form-label">學生</label>
        <div class="layui-input-block">
        <select name="student_id" xm-select="select1" id="mySelect" lay-filter="student" >
        </select>
        </div>
    </div>

5.php

// 學生選擇
    public function student($id = ''){
      $students = Db::name("cms_student")->where("class_id",$id)->select();

      $data = [];
      $class = [];
      foreach ($students as $item){
          $data['value'] = $item['id'];
          $data['name'] = $item['name'];
          $class[] = $data;
      }


      return api_json(0,'success',$class);
    }