省市四级联动 yii框架操作_wifrom写四级联动-优快云博客

本文链接：https://blog.youkuaiyun.com/anyao123/article/details/80093043

本文介绍了一种基于PHP和jQuery的省市四级联动选择器实现方案，通过前后端交互完成地区数据的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//视图层

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市四级联动</title>
</head>

<body>
    <form action="">
    <h1><font color="red">省级四级联动</font></h1>
        <select name="region" id="first">

        <option value="">请选择...</option>
    <?php foreach ($data as $key => $val): ?>
            <option value="<?= $val['region_id']?>"><?= $val['region_name']?></option>

    <?php endforeach ?>

        </select>
    </form>
</body>
</html>

   <script src="http://code.jquery.com/jquery-latest.js"></script>
   <script>
        $('#first').change(function(){
            var region_id = $(this).val();
            if (region_id!=''){
                $.ajax({
                    type:"get",
                    data:{region_id:region_id},
                    url:"?r=register/citylist",
                    dataType:"json",
                    success:function(result){
                        // alert(result.data.length);
                        // console.log(result.data);
                        var str = '';
                        str += "<select id='second'>";
                        str+= "<option>二级</option>";
                        for (var i=0;i<result.data.length;i++){
                            $(this).nextAll().remove();
                            str += '<option value="'+result.data[i]['region_id']+'">'+result.data[i]['region_name']+'</option>';
                        }
                        str += '</select>';
                        $('#first').after(str);
                    }
                })
            }
        })

        $(document).on('change','#second',function(){
             var region_id = $(this).val();
             if (region_id!=''){
                $.ajax({
                    type:"get",
                    data:{region_id:region_id},
                    url:"?r=register/citylist",
                    dataType:"json",
                    success:function(result){

                        // alert(result.data.length);
                        // console.log(result.data);
                        var str = '';
                        str += "<select id='thrid'>";
                        str+= "<option>三级</option>";
                        for (var i=0;i<result.data.length;i++){
                            $('#second').nextAll().remove();
                            str += '<option value="'+result.data[i]['region_id']+'">'+result.data[i]['region_name']+'</option>';
                        }
                        str += '</select>';
                        $('#second').after(str);

                    }
                })
            }
        })

        $(document).on('change','#thrid',function(){
             var region_id = $(this).val();
             if (region_id!=''){
                $.ajax({
                    type:"get",
                    data:{region_id:region_id},
                    url:"?r=register/citylist",
                    dataType:"json",
                    success:function(result){

                        // alert(result.data.length);
                        // console.log(result.data);
                        var str = '';
                        str += "<select id='four'>";
                        str+= "<option>四级</option>";
                        for (var i=0;i<result.data.length;i++){
                            $('#thrid').nextAll().remove();
                            str += '<option value="'+result.data[i]['region_id']+'">'+result.data[i]['region_name']+'</option>';
                        }
                        str += '</select>';
                        $('#thrid').after(str);

                    }
                })
            }
        })

</script>

//控制器层

<?php

namespace backend\controllers;

use Yii;

use yii\web\Controller;

class RegisterController extends Controller
{
   public $layout = false;//关闭yii框架自带样式

    public $enableCsrfValidation = false;

      public function actionCity()
      {
       $sql="select * from `weibo` where parent_id='0'";
       $data=yii::$app->db->createCommand($sql)->queryAll();
       // $data = yii::$app->db->createCommand("select * from weibo where parent_id ='0'")->queryAll();

        return $this->render('city',['data'=>$data]);
    }

    /**
     * 省市三级联动 ajax请求的方法
     *
     */
    public function actionCitylist($region_id){
        $secondInfo = Yii::$app->db->createCommand("select * from weibo where parent_id=$region_id")->queryAll();
       echo json_encode(['data'=>$secondInfo]);
    }
}