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=0;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=0;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()）；

這樣一來，三級欄目數據就會顯示出來了。