基于layui的二级联动表单select

HTML

<form class="layui-form layui-form-pane">
   <div class="layui-form-item" pane>
   <label class="layui-form-label">考次选择：</label>
       <div class="layui-input-block">
         <select name="publish_id" id="publish_id" class="layui-select input-pane" lay-verify="required" lay-filter="publish_id">
             <option value="">请选择</option>
             <?php foreach($publish_array as $id => $title) {?>
             <option value="<?=$id?>"><?=$title?></option>
             <?php }?>
          </select>
        </div>
     </div>
     <div class="layui-form-item" pane>
     <label class="layui-form-label">班级选择：</label>
         <div class="layui-input-block">
             <select name="class_id" id="class_id" class="layui-select input-pane" lay-verify="required">
             <option value="">请选择</option>
            </select>
         </div>
      </div>
</form>

JS

<script>
    layui.use(['table', 'jquery', 'form', 'layer', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;

        //监听select选择
        form.on('select(publish_id)', function (data) {
            //发异步请求
            let url = "/xxx/xxx?publish_id=" + data.value;
            $.get(url, function (res, status) {
                //清空下拉框
                const selector = $('#class_id');
                selector.empty().prepend("<option value='0'>--请选择班级--</option>");
                for (let i = 0; i < res.data.length; i++) {
                    selector.append("<option value='" + res.data[i].id + "'>" + res.data[i].name + "</option>");
                }
                //刷新select选择框渲染
                form.render('select');
            });
        });
    });
</script>

如图：