php仿经典省市县三级联动

之前有个需求要写个类似省市县三级联动的页面，于是，网上找了点资料看了下，其实原理很简单：

当我们选择一级栏目中某条记录的时候，会获取该栏目的vaule值，并发起ajax请求，后台根据这个vaule值，返回对应的二级数据，并且将数据填充到二级栏目列表；

当我们选择二级栏目中某条记录的时候，会获取该栏目的vaule值，再次发起ajax请求，后台根据这个vaule值，返回对应的三级数据，并且将数据填充到三级列表。

多说无益，请看效果：

下面贴上这个页面的html代码（这个$data数据来源会在后面说明）：

    <div class="panel-body">
        <h3>查看详细栏目</h3>
            <div class="signForm">
                <label>一级分类名称：</label>
                <div class="input-group short-row">
                    <select class="form-control parent"  id="fClass">
                        <option value="">请选择一级分类名称</option>
                        <?php foreach ($data as $value): ?>
                            <option
                                    value="<?= $value['fname'] ?>" ><?= $value['fname'] ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="signForm">
                <label>二级分类名称：</label>
                <div class="input-group short-row">
                    <select class="form-control parent"  id="sClass">
                        <option value="">请选择二级分类名称</option>

                    </select>
                </div>
            </div>
            <div class="signForm">
                <table class="table table-bordered bg-white">
                    <thead>
                    <tr>
                        <th class="text-center">ID</th>
                        <th>标题</th>
                        <th>详细图片</th>
                        <!--<th>描述</th>-->
                        <th>操作</th>
                    </tr>
                    </thead>
                    <col style="width: 5%">
                    <col style="width: 15%">
                    <col style="width: 15%">
                    <col style="width: 15%">
                    <col style="width: 15%">
                    <col style="width: 15%">
                    <tbody id = "list">

                    </tbody>
                </table>
            </div>
    </div>

接下来是js代码：

<script>
    $("#fClass").change(
        function() {
            getSclass();
        }
    );
    $("#sClass").change(
        function() {
            getList();
        }
    );
    function getSclass() {
        //获取选定的一级分类名称
        var fVal = $("#fClass").val();
        //根据一级分类查二级数据
        $.ajax({
            //取消异步，也就是必须完成上面才能走下面
            async:false,
            url:"http://localhost/yii2/web/index.php/mch/book/zhong/findsname",
            data:{val:fVal},
            type:"get",
            dataType:"JSON",
            success: function(data){
                var str="<option value=\"\">请选择二级分类名称</option>";
                //遍历数组，把它放入str
                for(var i=;i<data.length;i++){
                    var content = data[i];
                    str+="<option value=\""+content.sname+"\">"+content.sname +"</option>";
                }
                $("#sClass").html(str);
            }
        });
    }
    function getList() {
        //获取选定的一级分类名称
        var sVal = $("#sClass").val();
        //根据一级分类查二级数据
        $.ajax({
            //取消异步，也就是必须完成上面才能走下面
            async:false,
            url:"http://localhost/yii2/web/index.php/mch/book/zhong/findtclass",
            data:{val:sVal},
            type:"get",
            dataType:"JSON",
            success: function(data){
                var str="";//遍历数组，把它放入str
                for(var i=;i<data.length;i++){
                    var res = data[i];
                    str+="<tr> <td>"+res.id+"</td><td>"+res.tname+"</td><td> <img src='"+res.tpic+"'/></td>"+"<td></td></tr>";
                }
                $("#list").html(str);
            }
        });
    }
</script>

然后就是上面涉及到的两个接口，不难看出这两个action都是ZhongController.php类里面的方法：

public function actionFindsname($val)
    {
        $conn = \Yii::$app->db;
        $sql = "select * from sclass where fname ='".$val."'";
        $command =$conn->createCommand($sql);
        $data = $command->queryAll();
        return  $res=json_encode($data);
    }
    public function actionFindtclass($val)
    {
        $conn = \Yii::$app->db;
        $sql = "select * from tclass where sname ='".$val."'";
        $command =$conn->createCommand($sql);
        $data = $command->queryAll();
        return  $res=json_encode($data);
    }

补充说明：

$data：这个页面（index.php）是由控制器里面的actionIndex跳过来的，那么$data自然是来自actionIndex这方法；

public function actionIndex()
    {
        $conn = \Yii::$app->db;
        $sql = "select * from fclass";
        $command =$conn->createCommand($sql);
        $data = $command->queryAll();
        return $this->render('index', ['data'=>$data,]);
    }

这就是一级栏目数据的来源了，换种说法就是，页面的初始化数据，一级栏目数据在页面（index.php）初始化的时候就是必须有的。

然后，当这个一级栏目数据发生改变的时候，会触发这个select标签的change事件，于是就会执行相应的回调函数（getSclass()）；

相应地，当二级栏目数据发生改变的时候，会触发二级栏目select标签的change事件，于是就会执行相应的回调函数（getList()）；

这样一来，三级栏目数据就会显示出来了。