tp框架下的二级联动

2024-04-06 13:50:07

你需要具备的知识

tp框架（本篇文章基于tp5.1版本）；ajax；bootstrap；

什么是二级联动

就是bai两个下拉列表框.
就拿du你在网上注zhi册的时候要填个人dao地址,
我假设它有两个下zhuan拉列表(其实还可以有shu更多)
第一个下拉列表中让你选择的省,而另一个下拉列表让你
选择的是城市,当你在省的下拉列表中的选择发生改变的时候,
城市的下拉列表也应当跟着你所选择的省名称而发生改变.
这样就产生了一种联动的较果.
也就是简单的二级联动…

给出代码

html界面代码

$deptInfo中存放的是院系表的所有数据，$majorInfo中存放的是经过where（‘院系’,‘初始院系’）之后的所有专业数据，我们想要得到的结果是一开始进入界面时院系和专业信息显示的是要更改的院系和专业信息，也就是初始数据。

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">院系：</label>
  <div class="col-sm-8">
    <select class="form-control" name="dept_id" id="dept_id">
        {volist name="$deptInfo" id="dept"}
        <option value="{$dept.id}" 
                {eq name="$classesInfo.dept_id" value="$dept.id"}
                selected="selected"
                {/eq}
                >{$dept.name}</option>
        {/volist}
      </select>
  </div>
</div>
<div class="form-group">
  <label for="inputEmail4" class="col-sm-2 control-label">专业：</label>
  <div class="col-sm-8">
    <select class="form-control" name="major_id" id="major_id">
        {volist name="$majorInfo" id="major"}
        <option value="{$major.id}" 
                {eq name="$classesInfo.major_id" value="$major.id"}
                selected="selected"
                {/eq}
                >{$major.major}</option>
        {/volist}
      </select>
  </div>
</div>

js脚本

当院系的信息被修改时，就会触发js脚本。脚本大致意思是：将当前院系框中的内容传给控制器，在控制器中查找此院系的所有专业，将全部专业再传回来，用js代码将全部专业一个个循环显示在html的专业框中。

<script>
    //对院系下拉框选项改变进行专业变更
    $('#dept_id').change(function(){
        $dept_id=$('#dept_id').val();     
//        var nameInput=  document.getElementById("dept_id").value
//        alert($dept_id);
        $.ajax({
            type:"post",
            url:"{:url('admin/Classes/get_major')}",
            data:'dept_id='+$dept_id,
            dataType:"json",
            success:function(data){
                $("#major_id").empty();
                var count = data.length;
//                alert(data[1].major);
                var i = 0;
                var html;
                for(i;i<count;i++){
                    html += '<option value=" '+data[i].id+' ">'+data[i].major+'</option>'
                }
                $('#major_id').html(html);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert('错误！');
                     }
        });
    });
</script>

控制器代码

public function get_major()
    {
        //后台ajax验证
        if(request()->isPost()){
            $pid=input('dept_id');
            $majorlist=Db::table('ht_major')->where('department_id',$pid)->select();
            return json($majorlist);
        }else{
            return $this->error('错误');
        }
    }

最后的话

三级联动和二级联动的原理一样，都是用ajax来局部刷新网页内容，（接受数据给控制器，然后查找对应结果，返回数据，显示数据）

码农公寓