怎么在Yii2中利用dropdownlist实现一个三级联动功能

本篇文章为大家展示了怎么在Yii2中利用dropdownlist实现一个三级联动功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

视图部分：

<?php use yii\helpers\Url; use yii\widgets\ActiveForm; use yii\helpers\ArrayHelper; use yii\helpers\Html; /* @var $this yii\web\View */ /* @var $model common\search\service\ItemSearch */ /* @var $form yii\widgets\ActiveForm */ ?> <div class="row">   <div class="item-search">     <?php $form = ActiveForm::begin([       'action' => ['index'],       'method' => 'get',       'options' => ['class' => 'form-inline']     ]); ?>     <?= $form->field($model, 'cityName', ['options' => ['class' => 'form-group col-lg-2']])->dropDownList(ArrayHelper::map($cities, 'id', 'name'), ['prompt' => '请选择城市'])->label('请选择城市', ['class' => 'sr-only']) ?>     <?= $form->field($model, 'areaName', ['options' => ['class' => 'form-group col-lg-2']])->dropDownList(ArrayHelper::map($areas, 'id', 'name'), ['prompt' => '请选择区县'])->label('请选择区县', ['class' => 'sr-only']) ?>     <?= $form->field($model, 'communityName', ['options' => ['class' => 'form-group col-lg-2']])->dropDownList(ArrayHelper::map($communities, 'id', 'name'), ['prompt' => '请选择小区'])->label('请选择小区', ['class' => 'sr-only']) ?>     <div class="col-lg-2 col-lg-offset-1">       <input class="form-control" id="keyword" placeholder="请输入小区名" value="" />     </div>     <div class="col-lg-1">       <button type="button" id="search-community" class="btn btn-info">搜索</button>     </div>     <p></p>     <div class="form-group col-lg-1 pull-right">       <?= Html::submitButton('搜索', ['class' => 'btn btn-primary']) ?>     </div>     <?php ActiveForm::end(); ?>   </div> </div> <p>&nbsp;</p> <?php $this->registerJs('   //市地址改变   $("#itemsearch-cityname").change(function() {     //市id值     var cityid = $(this).val();     $("#itemsearch-areaname").html("<option value=\"0\">请选择区县</option>");     $("#itemsearch-communityname").html("<option value=\"0\">请选择小区</option>");     if (cityid > 0) {       getArea(cityid);     }   });   //区地址改变   $("#itemsearch-areaname").change(function() {     //区id值     var areaid = $(this).val();     $("#itemsearch-communityname").html("<option value=\"0\">请选择小区</option>");     if (areaid > 0) {       getCommunity(areaid);     }   });   //获取市下面的区列表   function getArea(id)   {     var href = "' . Url::to(['/service/base/get-area-list'], true). '";     $.ajax({       "type" : "GET",       "url"  : href,       "data" : {id : id},       success : function(d) {         $("#itemsearch-areaname").append(d);       }     });   }   //获取区下面的小区列表   function getCommunity(id)   {     var href = "' . Url::to(['/service/base/get-community-list'], true) . '";     $.ajax({       "type" : "GET",       "url"  : href,       "data" : {id : id},       success : function(d) {         $("#itemsearch-communityname").append(d);       }     });   }   //搜索小区   $("#search-community").click(function() {     var word  = $("#keyword").val();     var areaid = $("#itemsearch-areaname option:selected").val();     var href  = "' . Url::to(['/service/base/search-community'], true) . '";     if (areaid > 0) {       $.ajax({         "type" : "GET",         "url"  : href,         "data" : {id : areaid, word : word},         success : function(d) {           $("#itemsearch-communityname").html(d);         }       });     }   }); '); ?>

模型部分：

就是我们常用的ajax请求,当然php中需要直接组合成<option value=""></option>这样的结构直接用,$form->field($model, $var)中的变量数据表中不一定有,得在模型中自己定义,并设置安全字段,而且搜索模型也可能需要修改成自己需要的样子,模型可能要这样：

class HuangYeError extends \yii\db\ActiveRecord {   public $cityName;   public $areaName;   public $communityName;   public $group;   public $cate;   /**    * @inheritdoc    */   public static function tableName()   {     return 'll_hy_huangye_error';   }   public static function getDb()   {     return Yii::$app->get('dbnhuangye');   } }

之前是多表,需要使用jjoinWith()连表,后来被我全部转化为单表了,多表实在是慢,能转化成单表就用单表吧：

class HuangYeErrorSearch extends HuangYeError {   const PAGE_SIZE = 20;   public $communityName;   public $startTime;   public $endTime;   /**    * @inheritdoc    */   public function rules()   {     return [       [['id', 'serviceid', 'userid', 'categoryid', 'communityid', 'sortorder', 'ctime', 'utime', 'status'], 'integer'],       [['username', 'name', 'logo', 'phone', 'address', 'content', 'error', 'communityName', 'startTime', 'endTime'], 'safe'],     ];   }   /**    * @inheritdoc    */   public function scenarios()   {     // bypass scenarios() implementation in the parent class     return Model::scenarios();   }   /**    * Creates data provider instance with search query applied    *    * @param array $params    *    * @return ActiveDataProvider    */   public function search($params)   {     $query = HuangYeError::find();     //status == 9 删除状态     $condition = ' `status` != :status';     $p[':status'] = 9;     $query->where($condition, $p);     $dataProvider = new ActiveDataProvider([       'query' => $query,       'pagination' => [         'pageSize' => self::PAGE_SIZE,       ],     ]);     $this->load($params);     if (!$this->validate()) {       // uncomment the following line if you do not want to any records when validation fails       // $query->where('0=1');       return $dataProvider;     }     $query->andFilterWhere([       'userid' => $this->userid     ]);     $query->andFilterWhere(['like', 'username', $this->username])       ->andFilterWhere(['like', 'name', $this->name])       ->andFilterWhere(['like', 'phone', $this->phone])       ->andFilterWhere(['like', 'address', $this->address])       ->andFilterWhere(['like', 'content', $this->content])       ->andFilterWhere(['ll_hy_huangye_error.status' => $this->status])       ->andFilterWhere(['ll_hy_huangye_error.categoryid' => $this->categoryid])       ->andFilterWhere(['between', 'ctime', strtotime($this->startTime . '0:0:0'), strtotime($this->endTime . '23:59:59')])       ->andFilterWhere(['like', 'error', $this->error]);     if (intval($this->communityName)) {       $query->andFilterWhere(['ll_hy_huangye_error.communityid' => intval($this->communityName)]);     }     $order = ' `ctime` DESC';     $query->orderBy($order);     return $dataProvider;   } }

控制器中写比较简单一点,直接调用就行了：

/** * ajax请求小区 * * @param $id * @return string */ public function actionGetCommunityList($id) {     $option = '';     $result = self::getCommunity($id);     if ($result) {       foreach ($result as $value) {         $option .= '<option value="' . $value['id'] . '">' . $value['name'] . '</option>';       }     } else {       $option .= '<option value="0">暂未开通可选择的小区</option>';     }     echo $option; }

上述内容就是怎么在Yii2中利用dropdownlist实现一个三级联动功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。