Yii2.0实现下拉三级联动省份、城市、县/区功能
三级联动省份、城市、县/区是比较常见的功能,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三级联动。