[moka同学笔记]Yii下国家省市三级联动

时间:2022-05-14 05:16:10

第一次做省市三级联动时候遇到了坑,感觉还是自己太菜。头疼了很久研究了很久,最后终于发现了问题。大致总结一下思路

在控制器中实例化model,然后在视图中渲染所有国家,当选取国家时候,ajax通过 id="community-country_id" 把country_id传递到控制器中,控制器通过$this->ajaxGetProvince(); 得到country_id相同的省,再在视图中渲染显示该国家下省,选取省后,ajax再通过id="community-province_id" 传递province_id到控制器,控制器通过 $this->ajaxGetCity();得到province_id相同的市,再在视图中显示该省下的城市。

1.在视图中时候

第一种:(因为是地区管理库,国家表,省表,城市表三者分开,而非同一张表)

<div class="form-group field-community-country_id required">
<label class="col-lg-1 control-label" for="community-country_id">地区</label>
<div class="col-lg-8">
<?php
$countryList = array();
$countryList = ArrayHelper::map(CountryRegion::find()->where(['is_deleted'=>0])
->orderBy(['order_num'=>SORT_ASC,'id'=>SORT_ASC])->all(), 'id', 'name');
?>
<select id="community-country_id" class="form-control" name="Community[country_id]" style="width:200px;display: inline-block">
<option value="" selected>请选择</option>
<?php foreach ($countryList as $key => $val): ?>
<option value="<?= $key ?>"
<?= $modelCommunity->country_id != null && $modelCommunity->country_id == $key ? ' selected ' : '' ?>><?= $val ?></option>
<?php endforeach; ?>
</select> <?php
$provinceList = array();
if ($modelCommunity->country_id) {
$provinceList = ArrayHelper::map(Province::find()
->where(['country_id' => $modelCommunity->country_id,'is_deleted'=>0])
->orderBy(['order_num'=>SORT_ASC,'id'=>SORT_ASC])->all(), 'id', 'name');
}
?>
<select id="community-province_id" class="form-control" name="Community[province_id]" style="width:200px;display: inline-block">
<option value="">请选择</option>
<?php foreach ($provinceList as $key => $val): ?>
<option value="<?= $key ?>"
    <?= $modelCommunity->province_id != null && $modelCommunity->province_id == $key ? ' selected ' : '' ?>>
<?= $val ?></option>
<?php endforeach; ?>
</select> <?php
$cityList = array();
if ($modelCommunity->province_id) {
$cityList = ArrayHelper::map(City::find()->where(['province_id' => $modelCommunity->province_id,'is_deleted'=>0])
->orderBy(['order_num'=>SORT_ASC,'id'=>SORT_ASC])->all(), 'id', 'name');
}
?>
<select id="community-city_id" class="form-control" name="Community[city_id]" style="width:200px;display: inline-block">
<option value="">请选择</option>
<?php foreach ($cityList as $key => $val): ?>
<option value="<?= $key ?>"<?= $modelCommunity->city_id != null && $modelCommunity->city_id == $key ? ' selected ' : '' ?>><?= $val ?></option>
<?php endforeach; ?>
</select>
</div>
</div>

第二种:(在做学校管理,国家,省,城市,三者都在school表中)

<div class="form-group field-community-country_id required">
<label class="col-lg-1 control-label" for="community-country_id">地区</label>
<div class="col-lg-8">
<?php
$countryList = array();
$countryList = ArrayHelper::map(CountryRegion::find()->where(['is_deleted' => 0])
->orderBy(['order_num' => SORT_ASC, 'id' => SORT_ASC])->all(), 'id', 'name');
?>
<select id="community-country_id" class="form-control" name="School[country_id]"
style="width:200px;display: inline-block">
<option value="" selected>请选择</option>
<?php foreach ($countryList as $key => $val): ?>
<option
value="<?= $key ?>" <?= $model->country_id != null && $model->country_id == $key ? ' selected ' : '' ?>><?= $val ?></option>
<?php endforeach; ?>
</select> <?php
$provinceList = array();
if ($model->country_id) {
$provinceList = ArrayHelper::map(Province::find()->where(['country_id' => $model->country_id, 'is_deleted' => 0])
->orderBy(['order_num' => SORT_ASC, 'id' => SORT_ASC])->all(), 'id', 'name');
}
?>
<select id="community-province_id" class="form-control" name="School[province_id]"
style="width:200px;display: inline-block">
<option value="">请选择</option>
<?php foreach ($provinceList as $key => $val): ?>
<option
value="<?= $key ?>"<?= $model->province_id != null && $model->province_id == $key ? ' selected ' : '' ?>><?= $val ?></option>
<?php endforeach; ?>
</select> <?php
$cityList = array();
if ($model->province_id) {
$cityList = ArrayHelper::map(City::find()->where(['province_id' => $model->province_id, 'is_deleted' => 0])
->orderBy(['order_num' => SORT_ASC, 'id' => SORT_ASC])->all(), 'id', 'name');
}
?>
<select id="community-city_id" class="form-control" name="School[city_id]"
style="width:200px;display: inline-block">
<option value="">请选择</option>
<?php foreach ($cityList as $key => $val): ?>
<option
value="<?= $key ?>"<?= $model->city_id != null && $model->city_id == $key ? ' selected ' : '' ?>><?= $val ?></option>
<?php endforeach; ?>
</select>
</div>
</div>

第三种:(只有省和市联动,国家是中国)

<?php
$provinceList = ArrayHelper::map(Province::find()->where(['country_id' => 142])->all(), 'id', 'name');
?>
<?= $form->field($model, 'province_id')->dropDownList($provinceList, ['prompt' => '请选择', 'style' => 'width:200px','id'=>'community-province_id']) ?>
<?php
$cityList = array();
if ($model->province_id) {
$cityList = ArrayHelper::map(City::find()->where(['province_id' => $model->province_id])->all(), 'id', 'name');
}
?>
<?= $form->field($model, 'city_id')->dropDownList($cityList, ['prompt' => '请选择', 'style' => 'width:200px','id'=>'community-city_id']) ?>

2.在控制器中

第一种:

 //添加地区
public function actionCreate(){ $this->ajaxGetProvince(); //用作城市联动 这段很重要,因为需要获取前台传递过来的country_id,所以不能丢 $CountryModel = new CountryRegion();
$ProvinceModel = new Province();
$CityModel = new City();
$CityProvince = new Province();       /**其他代码*/ return $this->render('create',[
'level'=>$level,
'CountryModel'=>$CountryModel,
'ProvinceModel'=>$ProvinceModel,
'CityModel'=>$CityModel,
'CityProvince'=>$CityProvince
]);
}

第二种和第三种控制器中一样代码如下:


public function actionCreate()
{
$this->ajaxGetProvince(); //用作城市联动
$this->ajaxGetCity(); //用作城市联动 $model = new School();

     /**中间其他代码*/
  return $this->render('create', [
'model' => $model,
]);
 

3.前端

/*国家、省份联动ActiveRecord*/
$(document).on('change', '#community-country_id', function () {
var $select = $(this),
requestUrl = $select.attr('data-country-url') || window.location.href;
if ($select.attr('data-requestform') === 'true') {
requestUrl = $select.parents('form').attr('action');
}
$('#community-province_id').html('<option value="">请选择</option>');
$('#community-city_id').html('<option value="">请选择</option>');
if ($select.val()) {
$.ajax({
url: requestUrl,
data: {
country_id: $select.val(),
ajax_get_province: true
},
type: "GET",
success: function (e) {
$('#community-province_id').html(e);
$('#community-city_id').html('<option value="">请选择</option>');
console.log(e);
}
});
}
}); /*省份、城市联动ActiveRecord*/
$(document).on('change', '#community-province_id', function () {
var $select = $(this),
requestUrl = $select.attr('data-province-url') || window.location.href;
if ($select.attr('data-requestform') === 'true') {
requestUrl = $select.parents('form').attr('action');
} $('#community-city_id').html('<option value="">请选择</option>');
if ($select.val()) {
$.ajax({
url: requestUrl,
data: {
province_id: $select.val(),
ajax_get_city: true
},
type: "GET",
success: function (e) {
$('#community-city_id').html(e);
console.log(e);
}
});
}
});

以上~~

第一次这样做,应该会有更简单的方法吧,请求高手指导。

转载本文请注明出处。