联动（tp5 基于layui 的二级联动）

具体请看（https://fly.layui.com/extend/interact/）

1.HTML页面

<link rel="stylesheet" href="/static/layui/css/layui.css"  media="all">

<form class="layui-form layui-form-pane" action="" method="post">
  <div class="layui-form-item test-region"></div>
  
<!-- 如果要修改回显  ，从php 传值过来-->

 <input type="hidden" value="{$m_pro}" id="pro" >
  <input type="hidden" value="{$m_sub}" id="sub">

</form>

2.php 方法

 public function pro_sub(){
        $pro_subs = ProSUBModel::all()；
      return json($pro_subs);
    }

3.JS

<script src="/static/layui/layui.js" charset="utf-8"></script>


<script>

    layui.config({
        base: '/static/js/', //引用下面的 interact.js文件
    })
    // 联动项
    layui.use(['interact','form'],function(){
        var interact = layui.interact;
        var form = layui.form;
        // var a = $.get("{:url('test/pro_sub')}",function (b) {  // 接收数据 一
        //     var data = b;
        //     console.dir(data )
        // })
// form表单得到的两个默认值
        var pro = $("#pro").val();
        var sub = $("#sub").val();

        var data = [];
        $.get("{:url('test/pro_sub')}",function (b) { // 接收数据 二
            data = b;
        //console.dir(data )
            /*  interact.render({
                  elem : '.test-region',
                  title : '选择联动',
                  data : data,
                  name : 'region',
              });
              interact.render({
                  elem : '.test-region1',
                  title : '选择省市区',
                  data : data,
                  name : 'region1',
                  hint : ['专业','科目'],
              });
              interact.render({
                  elem : '.test-region2',
                  title : '选择联动',
                  data : data,
                 name : 'region1',
                  hint : ['专业','科目'],
              });*/
        interact.render({
            elem : '.test-region',
            title : '专业科目',
            data : data,
            name : 'pro_sub',
            selected : [pro,sub],  // 默认   selected : [1,4,11], 三级
            hint : ['专业','科目'],
        });

// 编辑回显
  interact.render({
            elem : '.test-region',
            title : '专业科目',
            data : data,
            name : 'pro_sub',
            selected : [1,4],  // 默认   selected : [1,4,11], 三级
            hint : ['专业','科目'],
        });

    });
</script>

4. 建个js文件 名为（interact.js），把以下内容复制进去

    layui.define("form", function(exports) {
       var MOD_NAME = "interact",
          o = layui.jquery,
          form = layui.form,
          elems = [],
          hints = [],
          datas = [],
          events = [],
          interact = function() {};
       interact.prototype.on = function(event, callback) {
          events.push(event);
          return layui.onevent.call(this, MOD_NAME, event, callback)
       };
       interact.prototype.render = function(e) {
          datas.push(this.data(e.data));
          elems.push(e.elem);
          hints.push(e.hint ? e.hint : "");
          this.template(e)
       };
       interact.prototype.template = function(e) {
          var t = this,
             arr = ['<label class="layui-form-label">' + e.title + "</label>"],
             hint = e.hint ? e.hint : ["请选择"];
          if(e.selected) {
             t.selected(e, arr, hint)
          } else {
             o.each(hint, function(idx, value) {
                var options = (idx == 0 ? t.options(e, 0).join("") : "");
                arr.push('<div class="layui-input-inline"><select name="' + e.name + '[]"><option value="">' + value + "</option>" + options + "</select></div>")
             })
          }
          o(e.elem).html(arr.join(""));
          t.refresh(e)
       };
       interact.prototype.select = function(e, obj, value) {
          var t = this,
             index = t.curr_idx(obj),
             otl = obj.parents(".layui-input-inline"),
             ot = otl.next();
          if(value !== "" && (!datas[t.curr_idx(obj)][value] || !datas[index][value].length)) {
             otl.nextAll().remove();
             return false
          }
          ot.length && otl.nextAll().find("select option:not(option:first)").remove();
          if(value !== "") {
             var i = otl.index();
             if(!ot || !ot.length) {
                ot = otl.after('<div class="layui-input-inline"><select name="' + e.name + '[]"><option value="">' + (hints[index] && hints[index][i] ? hints[index][i] : "请选择") + "</option></select></div>").next()
             }
             var options = [ot.find("option:first").prop("outerHTML")];
             ot.find("select").html(t.options(e, value, options, obj).join(""))
          }
          t.refresh(e)
       };
       interact.prototype.selected = function(e, arr, hint) {
          var t = this;
          e.selected.unshift(0);
          o.each(e.selected, function(idx, value) {
             if(idx < e.selected.length - 1) {
                var options = "";
                o.each(t.data(e.data)[value], function(index, item) {
                   options += '<option value="' + item.id + '" ' + (item.id == e.selected[idx + 1] ? "selected" : "") + ">" + item.title + "</option>"
                });
                arr.push('<div class="layui-input-inline"><select name="' + e.name + '[]"><option value="">' + (hint[idx] ? hint[idx] : "请选择") + "</option>" + options + "</select></div>")
             }
          });
          return arr
       };
       interact.prototype.options = function(e, value, arr, obj) {
          var t = this;
          arr = arr ? arr : [];
          o.each(datas[t.curr_idx(obj)][value], function(idx, item) {
             arr.push('<option value="' + item.id + '">' + item.title + "</option>")
          });
          return arr
       };
       interact.prototype.refresh = function(e) {
          var t = this;
          form.render();
          o(elems.join(",")).find(".layui-anim dd").click(function() {
             var obj = o(this),
                value = obj.attr("lay-value"),
                filter = obj.parents("[lay-filter]");
             t.select(e, obj, value);
             return filter ? layui.event.call(this, MOD_NAME, "interact(" + filter.attr("lay-filter") + ")", {
                elem: obj.parents(".layui-input-inline").find("select option[value=" + value + "]"),
                othis: obj,
                value: value,
                text: obj.text()
             }) : ""
          })
       };
       interact.prototype.curr_idx = function(obj) {
          var idx = 0;
          if(obj) {
             var cls = obj.parents(".layui-form-item").attr("class").replace("layui-form-item ", "");
             idx = elems.findIndex(function(val) {
                return val == "." + cls
             })
          }
          return idx
       };
       interact.prototype.data = function(data) {
          var arr = [];
          o.each(data, function(index, item) {
             if(!arr[item.pid]) {
                arr[item.pid] = []
             }
             arr[item.pid].push(item)
          });
          return arr
       };
       exports(MOD_NAME, new interact())
    });