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

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

在控制器中实例化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);
            }
        });
    }
});

以上~~

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

转载本文请注明出处。