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></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 删除状态unityid => 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; }

更多关于Yii相关内容感兴趣的读者可查看本站专题：《Yii框架入门及常用技巧总结》、《php优秀开发框架总结》、《smarty模板入门基础教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家基于Yii框架的PHP程序设计有所帮助。