如何在Yii框架的Select2组件中显示选中项文本（当前显示ID）

这个问题我之前在项目里也碰到过，核心是初始化时没给Select2传递已选中项的对应文本，再加上可能后端返回格式或前端模板函数的小疏漏。下面一步步帮你搞定：

1. 正确设置initValueText参数 #

你当前代码里initValueText设为空字符串，这就导致页面加载时，已选中的ID没有对应的文本可以显示。我们需要先从数据库中获取已选中项的文本，再赋值给这个参数：

<?php
// 先获取已选中贡献者的文本（假设你的模型是Contributor，文本字段是name）
$initValueText = '';
if (!empty($model->contributors)) {
    // 处理单选/多选两种情况：如果是多选，$model->contributors是数组；单选则是单个ID
    $ids = is_array($model->contributors) ? $model->contributors : [$model->contributors];
    
    // 批量查询对应文本
    $selectedNames = \app\models\Contributor::find()
        ->select('name')
        ->where(['id' => $ids])
        ->column();
    
    // 单选的话取第一个值，多选则直接传数组
    $initValueText = is_array($model->contributors) ? $selectedNames : reset($selectedNames);
}
?>

然后把initValueText的值传入Select2组件：

'initValueText' => $initValueText,

2. 确保后端接口返回正确的数据格式 #

Select2的AJAX接口要求返回的数据必须包含id和text字段（这是Select2的默认约定）。你的data2接口需要返回类似这样的JSON结构：

{
  "results": [
    {"id": 1, "text": "张三"},
    {"id": 2, "text": "李四"}
  ]
}

如果你的后端返回的文本字段不是text（比如是name），那就要修改前端的模板函数，把contributor.text改成contributor.name。

3. 修正前端模板函数的逻辑 #

你当前的templateResult和templateSelection参数里用了contributor_id作为参数名，这很容易混淆，建议改成contributor，同时加上加载状态的处理：

'templateResult' => new JsExpression('function(contributor) { 
    // 处理Select2的加载状态
    if (contributor.loading) return contributor.text;
    return contributor.text; // 如果后端返回的是name，这里改成contributor.name
}'),
'templateSelection' => new JsExpression('function (contributor) { 
    // 没有选中项时显示占位提示
    return contributor.text || "请选择"; // 同样，后端返回name的话改这里
}'),

完整修改后的代码示例 #

把上面的步骤整合起来，最终的代码大概是这样：

<?php
// 先获取已选中贡献者的文本
$initValueText = '';
if (!empty($model->contributors)) {
    $ids = is_array($model->contributors) ? $model->contributors : [$model->contributors];
    $selectedNames = \app\models\Contributor::find()
        ->select('name')
        ->where(['id' => $ids])
        ->column();
    $initValueText = is_array($model->contributors) ? $selectedNames : reset($selectedNames);
}
?>

<?= $form->field($model, 'contributors')->widget(Select2::classname(), [
    'initValueText' => $initValueText,
    'options' => ['placeholder' => 'Search for a Contributor ...', 'multiple' => true], // 多选的话加上这个参数
    'pluginOptions' => [
        'allowClear' => true,
        'minimumInputLength' => 3,
        'ajax' => [
            'url' => \yii\helpers\Url::to(['data2']),
            'dataType' => 'json',
            'data' => new JsExpression('function(params) { return {q:params.term}; }')
        ],
        'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
        'templateResult' => new JsExpression('function(contributor) { 
            if (contributor.loading) return contributor.text;
            return contributor.text;
        }'),
        'templateSelection' => new JsExpression('function (contributor) { 
            return contributor.text || "请选择";
        }'),
    ],
])->label('Contributors'); ?>

后端接口示例（参考） #

如果你的data2接口还没调整好，这里给个PHP示例：

public function actionData2()
{
    $q = Yii::$app->request->get('q');
    $contributors = \app\models\Contributor::find()
        ->where(['like', 'name', $q])
        ->limit(20)
        ->all();
    
    $results = [];
    foreach ($contributors as $contributor) {
        $results[] = [
            'id' => $contributor->id,
            'text' => $contributor->name, // 这里必须对应前端模板里的字段名
        ];
    }
    
    return json_encode(['results' => $results]);
}

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