Yii2使用Kartik DepDrop编辑页父下拉选中后子下拉未联动如何解决

问题原因 #

Kartik DepDrop组件默认仅在父级下拉菜单值发生变更时触发子级选项加载，更新表单页加载时父级下拉是自动填充的默认值，没有触发变更事件，因此子级不会主动拉取对应选项；另外你当前控制器返回的selected字段为空，就算子级拉取到选项后也无法自动选中原有值。

解决步骤 #

1. 修改form.php中DepDrop配置 #

新增initialize参数开启初始化自动请求，同时新增params参数将子级当前已选值传给后端：

<?php
  echo $form->field($model, 'relatedid')->widget(DepDrop::classname(), [
       'options'=>['id'=>'relatedid-id'],
        'type' => 2, //type select2
        'pluginOptions'=>[
        'depends'=>['type-id'],
         'placeholder'=>'Select...',
         'url'=>Url::to(['/ratings/finddata']),
         'initialize' => true, // 页面加载时父级有值就自动拉取子级选项
         'params' => ['relatedid-id'] // 传递子级当前已选值到后端
          ],
          ]);
  ?>

2. 修改controller.php中actionFinddata逻辑 #

接收前端传的子级已选值，返回时赋值给selected字段：

public function actionFinddata()
    {
        $pagegroup = ['Centresbe','Spotinfobe','Sportsbe','Coachesbe','Clinicsbe','Holidaysbe','Eventsbe'];
        $category = '';
        $selected = '';
        // 接收子级已选值
        if (isset($_POST['relatedid-id'])) {
            $selected = $_POST['relatedid-id'];
        }
        Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
            if (isset($_POST['depdrop_parents'])) {
                $parents = $_POST['depdrop_parents'];
                if ($parents != null) {
                    $type = $parents[0];
                    $dynamic_class = '\\backend\\models\\'.$type;
                    if(in_array($type, $pagegroup))
                    {
                          $catres = $dynamic_class::find()->where(['status' => 'Active'] )->one();
                            $category = $catres->category;
                    }
                    
                     $data = $dynamic_class::getdatatype($category);

                    return ['output'=>$data, 'selected'=>$selected];
                }
            }
            return ['output'=>'', 'selected'=>''];
    }

兼容方案（可选） #

如果配置initialize参数未生效，可以在表单页面底部添加JS手动触发父级下拉变更事件：

<?php
$this->registerJs("
    $('#type-id').trigger('change');
");
?>

注意事项 #

确认模型中getdatatype方法返回的数组格式符合DepDrop要求，必须为[['id' => 选项值, 'name' => 选项显示文本]]的二维数组，否则选项无法正常渲染。

内容的提问来源于stack exchange，提问作者user3526766