Yii2 二级联动 DropDownList

先随手建库 CIty 和Province

| province | CREATE TABLE `province` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `province` varchar(255) NOT NULL,
  `provinceid` int(10) unsigned NOT NULL COMMENT '省份id,外联市区id',
  PRIMARY KEY (`id`),
  KEY `provinceid` (`provinceid`)
) ENGINE=InnoDB AUTO_INCREMENT=35 DEFAULT CHARSET=utf8 |

| city  | CREATE TABLE `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `cityid` int(10) unsigned NOT NULL,
  `city` varchar(50) NOT NULL,
  `provinceid` int(10) unsigned NOT NULL,
  PRIMARY KEY (`id`),
  KEY `provinceid` (`provinceid`),
  KEY `cityid` (`cityid`),
  CONSTRAINT `city_ibfk_1` FOREIGN KEY (`provinceid`) REFERENCES `province` (`provinceid`)
) ENGINE=InnoDB AUTO_INCREMENT=346 DEFAULT CHARSET=utf8 COMMENT='行政区域地州市信息表' |

然后随手再点个Users的库

| users | CREATE TABLE `users` (
  `uid` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `user` int(11) NOT NULL,
  `name` varchar(200) NOT NULL DEFAULT '',
  `desc` text NOT NULL,
  `cityid` int(10) unsigned NOT NULL,
  `provinceid` int(10) unsigned NOT NULL,
  PRIMARY KEY (`uid`),
  KEY `city_id` (`cityid`),
  KEY `provinceid` (`provinceid`),
  CONSTRAINT `users_ibfk_2` FOREIGN KEY (`cityid`) REFERENCES `city` (`cityid`),
  CONSTRAINT `users_ibfk_1` FOREIGN KEY (`provinceid`) REFERENCES `province` (`provinceid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 |

好了,后面喜欢的话就添加点数据, 接下来开始写代码.

只要需要2步 View.php中代码如下

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use app\models\Province;
use app\models\City;
?>

<div class="users-form" id="area">
    <?php $form = ActiveForm::begin(); ?>
    <?= $form->field($model, 'user')->textInput() ?>
    <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>
    <?= $form->field($model, 'provinceid')->label('Province')->dropDownlist(
        Province::find()
            ->select(['province','provinceid'])
            ->indexBy('provinceid')
            ->column(),
            [
                'prompt'=>'请选择省份',
                 'onchange'=>'
                    $.post("index.php?r=users/list&id='.'"+$(this).val(),function(data){
                    //'onchange'=>'$.post("/index/list.html?id='.'"+$(this).val(),function(data){
                        $("select#users-cityid").html(data);
                    });',
            ]
    ) ?>
    <?= $form->field($model, 'cityid')->dropDownList(
        City::find()->select(['city','cityid'])->indexBy('cityid')->column(),
        [
            'prompt'=>'选择市区',
        ]
    ) ?>
    <?= $form->field($model, 'desc')->textarea(['rows' => 10]) ?>
    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>
    <?php ActiveForm::end(); ?>
</div>

上面问题最关键的就是onchange方法. 是用ajax调取Controller来影响下面的栏

Controller中代码如下

public static function actionList($id=230000)  //这个$id调试用,可以直观看到调试数据又没问题
    {
        $countCities = City::find()->where('provinceid=:id',[':id'=>$id])
                    ->count();
                $cities = City::find()->where('provinceid=:id',[':id'=>$id])
                    ->all();
                if ($countCities > 0) {
                    foreach ($cities AS $city) {
                        echo "<option value='" . $city->cityid . "'>" . $city->city. "</option>";
                    }
                } else {
                    echo "<option>-</option>";
                }
    }