标签:att color line list _id com oca down htm
第一次做省市三级联动时候遇到了坑,感觉还是自己太菜。头疼了很久研究了很久,最后终于发现了问题。大致总结一下思路
在控制器中实例化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); } }); } });
以上~~
第一次这样做,应该会有更简单的方法吧,请求高手指导。
转载本文请注明出处。
标签:att color line list _id com oca down htm
原文地址:http://www.cnblogs.com/hsd1727728211/p/6047940.html