Yii2.0实现下拉三级联动省份、城市、县/区功能

作者:IT技术圈子 浏览量:395   发表于 2023-09-24 14:51 标签:

   三级联动省份、城市、县/区是比较常见的功能,Yii2中实现省份、城市、县/区三级联动比较简单,Yii2自身封装好了很多模板,直接调用即可。具体实现步骤如下:

一、Model模型层

Model层主要返回省市县/区的基础数据

        /**
	 * 获取省份
	 */
	public function getProvinceList() {
		$data = Province::find()->all();
		return $data;
	}
	/**
	 * 获取城市
	 * @param $pid int 省份id 
	 */
	public function getCityList($pid) {
		$data = City::find()->where(['province_id'=>$pid])->all();
		return $data;
	}
	/**
	 * 获取县、区
	 * @param $pid int 城市id 
	 */
	public function getDistrictList($pid) {
		$data = District::find()->where(['city_id'=>$pid])->all();
		return $data;
	}

二、Controler控制器层

控制器层,主要处理返回的数据。这里只获取城市和县,省份的数据在页面加载的第一时间就已得到,见View里面写法:

        /**
	 * 获取城市
	 * @param $pid int 省份id
	 */
	 public function actionGetcity($pid) {
            $service = new Addressservice();
            $city_list = $service->getCityList($pid);
            $city_list = \yii\helpers\ArrayHelper::map($city_list,'city_id','city_name');// 格式化数据
            $prompt = "请选择城市";
            // Html:yii\helpers\Html;
            echo Html::tag('option',$prompt, ['value'=>'0']) ;// 生成select菜单的第一个选项
            foreach($city_list as $value=>$name)
            {
                echo Html::tag('option',Html::encode($name),array('value'=>$value));
            }
        } 
        /**
	 * 获取县/区
	 * @param $pid int 城市id
	 */
	 public function actionGetdistrict($pid) {
            $service = new Addressservice();
            $district_list = $service->getDistrictList($pid);
            $district_list = \yii\helpers\ArrayHelper::map($district_list,'district_id','district_name');// 格式化数据
            $prompt = "请选择县/区";
            // Html:yii\helpers\Html;
            echo Html::tag('option',$prompt, ['value'=>'0']) ;// 生成select菜单的第一个选项
            foreach($district_list as $value=>$name)
            {
                echo Html::tag('option',Html::encode($name),array('value'=>$value));
            }
        }

三、View视图层

Viewh视图层主要负责展示数据,触发相关JS时间,调用接口获取数据

field($model, 'province_id')->dropDownlist(
	ArrayHelper::map(Addressservice::getProvinceList(),'province_id','province_name'),['prompt'=>'请选择省份',
	'onchange'=>'
		$.post("'.\Yii::$app->urlManager->createUrl('goods/getcity').'?pid="+$(this).val(),function(data){
			$("#goods-city_id").html(data);
		});'
	],['style'=>'width:150px;'])->label('省份')?>field($model, 'city_id')->dropDownlist(
	ArrayHelper::map(Addressservice::getCityList($model->province_id),'city_id','city_name'),['prompt'=>'请选择城市',
	'onchange'=>'
		$.post("'.\Yii::$app->urlManager->createUrl('goods/getdistrict').'?pid="+$(this).val(),function(data){
			$("#goods-district_id").html(data);
		});'
	],['style'=>'width:150px;'])->label('城市')?>field($model, 'district_id')->dropDownlist(ArrayHelper::map(
	Addressservice::getDistrictList($model->city_id),'district_id','district_name'),['prompt'=>'请选择县/区'],['style'=>'width:150px;'])->label('县/区')?>

按照上面方式即可实现基本的Yii2三级联动。