ThinkPHP5.0(三)基于ThinkPHP5.0下的二级联动，实现不刷新页面的情况下根据一个下拉框的选项，改变另一个下拉框的选项

二级联动或者三级联动

顾名思义多个下拉框的联动，就是当一个父级下拉框某个选项被选中后可以影响其子下拉框中的值。
例如当我们在选择地址的时候，但我们在一个下拉框选择好省份后，接下来的市级下拉框里面的选项会变为对应省的市级，这就是一个二级联动。

实际需求

我在项目中遇到的需求是根据用户选中男女的下拉框的选项，读取数据库中不同的男女项目到运动项目的下拉框中。

HTML：

其中因为男女下拉框的默认选项为男，所以项目中volist初始的数据源为男的运动项目

                    <div class = "form-group">
                        <label  class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <select name="gender" id = "gender"class="form-control" >
                                <option value='0'>男</option>
                                <option value="1" >女</option>
                            </select>
                        </div>
                    </div>
                     <div class = "form-group">
                        <label  class="col-sm-2 control-label">报名项目</label>
                        <div class="col-sm-10">
                            <select name="xiangmu" id = "xiangmu"class="form-control" >
                                <option value="">--请选择项目--</option>
                                {volist name="xm" id="vo"}
                                <option value={$vo.ID}>{$vo.NAME}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>

Ajax：

主要是对男女下拉框change事件的响应，将男或者女的数据通过url 传到后台，后台接受数据后根据数据查询数据表，将结果返回。

   <script type="text/javascript">
        //对性别下拉框选项改变进行运动项目变更
        $('#gender').change(function(){
            $gender=$('#gender').val();
            $.ajax({
                type:"post",
                url:"{:url('JoinController/get_Xiangmu')}",
                data:'gender='+$gender,
                dataType:"json",
                success:function(data){
                    $("#xiangmu").empty();
                    var count = data.length;
                    //alert(data[1].NAME);
                    var i = 0;
                    var html ='<option value="">--请选择项目--</option>';
                    for(i;i<count;i++){
                        html += '<option value=" '+data[i].ID+' ">'+data[i].NAME+'</option>'
                    }
                    $('#xiangmu').html(html);
                }
            });
        });
    </script>

ajax方法的主要参数有：

1.url:后台接收ajax的地址；

2.data:传到后台的数据，一般用json传递；这里传递的是选中类的id值。

3.type:传递方法，有get和post方法，我一般用post,可以传输的数据比get多，安全性也高些；

4.dataType:传输的数据类型；

5.success:ajax执行成功的方法，也就是回调函数。这里在执行success时，我先用empty()清空了第二个下拉菜单的内容，然后再输出从后台获取的数据。

url地址接收数据后的处理：

对传输过来的gender通过input获取后，在运动项目的数据表sport_unit中进行查询，将结果返回。

    /**后台ajax处理，实现下拉框的男女和项目的二级联动
     * @return Json
     * @throws DbException
     * @throws \think\db\exception\DataNotFoundException
     * @throws \think\db\exception\ModelNotFoundException
     */
    public function get_Xiangmu()
    {
        //后台ajax验证
        if(request()->isPost()){
            $pid=input('gender');
            $xiangmu=Db::table('sport_unit')->where('GENDER',$pid)->select();
            return json($xiangmu);
        }

    }