Yii2 GridView中Kartik Select2多列过滤器仅显示一次的问题

问题现象 #

在Yii2标准GridView的两列中配置Kartik Select2作为过滤器，仅第一列（facility_id）能正常渲染Select2组件，第二列（client_push_mail_id）过滤器为空。查看DOM结构：

• 两列均生成了原生<select id="...">标签
• 第二列缺少Select2组件必备的select2-container包裹层（即<span class="select2 select2-container...>）

相关配置代码如下：

[
    'attribute' => 'facility_id',
    'value' => 'facility.name',
    'filter' => Select2::widget([
        'model' => $searchModel,
        'attribute' => 'facility_id',
        'data' => ArrayHelper::map(Facility::find()->where('client_id = ' . $client->id)->orderBy('id DESC')->all(), 'id', 'name'),
        'options' => ['placeholder' => ''],
        'pluginOptions' => [
            'allowClear' => true,
            'width' => 'element',
        ],
    ]),
],
[
    'attribute' => 'client_push_mail_id',
    'value' => 'clientPushMail.name',
    'filter' => Select2::widget([
        'model' => $searchModel,
        'attribute' => 'client_push_mail_id',
        'data' => ArrayHelper::map(ClientPushMail::find()->where('client_id = ' . $client->id)->orderBy('id DESC')->all(), 'id', 'name'),
        'options' => ['placeholder' => ''],
        'pluginOptions' => [
            'allowClear' => true,
            'width' => 'element',
        ],
    ]),
]

可能原因 #

• 数据源为空：ClientPushMail查询未返回任何数据，Select2在无数据时不会渲染组件容器，仅保留原生select标签
• JS初始化失败：Select2的JS资源加载异常、重复初始化或GridView的AJAX刷新导致第二个组件未被正确初始化
• 模型属性问题：搜索模型（$searchModel）未定义client_push_mail_id属性，或属性的验证规则、场景配置异常，导致Select2无法绑定
• HTML ID冲突：虽然配置中属性名不同，但生成的select标签ID可能重复（概率较低，但需排查）

解决思路 #

1. 验证数据源有效性 #

临时在代码中输出ClientPushMail查询结果，确认是否存在数据：

// 在Select2配置上方添加
$mailData = ArrayHelper::map(ClientPushMail::find()->where('client_id = ' . $client->id)->orderBy('id DESC')->all(), 'id', 'name');
var_dump($mailData);die;

如果数据为空，需要检查client_id是否正确，或ClientPushMail表中是否存在对应记录。

2. 修复JS初始化问题 #

• 检查资源加载：查看页面源码，确认select2.js和select2.css已正确加载（Kartik组件通常会自动注册资源，若未加载可手动在视图中添加use kartik\select2\Select2Asset; Select2Asset::register($this);）
• 手动触发初始化：在页面底部添加JS代码，针对第二个select标签手动初始化Select2：

  $(document).ready(function() {
      // 替换为实际的select ID，可通过DOM查看获取
      $('#searchmodel-client_push_mail_id').select2({
          allowClear: true,
          width: 'element',
          placeholder: ''
      });
  });
  

• 处理AJAX刷新场景：如果GridView开启了PJAX，需在pjax:success事件中重新初始化：

  $(document).on('pjax:success', function() {
      $('#searchmodel-client_push_mail_id').select2({
          allowClear: true,
          width: 'element',
          placeholder: ''
      });
  });
  

3. 检查搜索模型配置 #

• 确认$searchModel类中已定义属性：

  public $client_push_mail_id;
  

• 在rules()方法中添加对应验证规则：

  public function rules()
  {
      return [
          // ...其他规则
          [['client_push_mail_id'], 'integer'],
      ];
  }
  

4. 排查HTML ID冲突 #

查看页面中两个select标签的ID，确保它们唯一（例如第一个为searchmodel-facility_id，第二个为searchmodel-client_push_mail_id），若存在冲突，可在Select2配置的options中手动指定ID：

'options' => [
    'placeholder' => '',
    'id' => 'custom-client-push-mail-id'
],

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