PHP imitates the classic three-level linkage of provinces, cities and counties

Before, there was a need to write a page similar to the three-level linkage of provinces, cities and counties, so I found some information on the Internet and looked at it. In fact, the principle is very simple:

When we select a record in the first-level column, we will obtain the vaule value of the column, and initiate an Ajax request. According to this vaule value, the background will return the corresponding second-level data, and fill the data into the second-level column list;

When we select a record in the second-level column, we will obtain the vaule value of the column, initiate an ajax request again, and return the corresponding third-level data according to this vaule value in the background, and fill the data into the third-level list.

It is useless to say more, please see the effect:

Paste the html code of this page below (the source of this $data data will be explained later):

    <div class="panel-body">
        <h3>View Details</h3>
            <div class="signForm">
                <label>First-level category name:</label>
                <div class="input-group short-row">
                    <select class="form-control parent"  id="fClass">
                        <option value= "" >Please select a first-level category name</option>
                        <?php foreach ($data as $value): ?>
                            <option
                                    value="<?= $value['fname'] ?>" ><?= $value['fname'] ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="signForm">
                <label>Secondary category name:</label>
                <div class="input-group short-row">
                    <select class="form-control parent"  id="sClass">
                        <option value= "" >Please select a secondary category name</option>

                    </select>
                </div>
            </div>
            <div class="signForm">
                <table class="table table-bordered bg-white">
                    <thead>
                    <tr>
                        <th class="text-center">ID</th>
                        <th>Title</th>
                        <th>Detailed image</th>
                        <!--<th>描述</th>-->
                        <th>Action</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>

Next is the js code:

<script>
    $("#fClass").change(
        function() {
            getSclass();
        }
    );
    $("#sClass").change(
        function() {
            getList();
        }
    );
    function getSclass() {
        // Get the selected first-level classification name 
        var fVal = $("#fClass").val();
         // Check the second-level data according to the first-level classification 
        $.ajax({
             // Cancel the asynchronous, that is, the above must be completed Can go below 
            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=\"\">Please select the secondary category name</option> " ;
                 // Traverse the array and put it into 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() {
        // Get the selected first-level classification name 
        var sVal = $("#sClass").val();
         // Check the second-level data according to the first-level classification 
        $.ajax({
             // Cancel the asynchronous, that is, the above must be completed Can go below 
            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= "" ; // Traverse the array and put it into 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>

Then there are the two interfaces involved above. It is not difficult to see that these two actions are methods in the ZhongController.php class:

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);
    }

Additional instructions:

$data: This page (index.php) is skipped by the actionIndex in the controller, so $data naturally comes from the actionIndex method;

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

This is the source of the first-level column data. In other words, the initialization data of the page, the first-level column data is necessary when the page (index.php) is initialized.

Then, when the first-level column data changes, the change event of the select tag will be triggered, and the corresponding callback function (getSclass()) will be executed;

Correspondingly, when the secondary column data changes, the change event of the secondary column select tag will be triggered, and then the corresponding callback function (getList()) will be executed;

In this way, the three-level column data will be displayed.