Laravel Orchid中Select组件默认选中空选项问题咨询

根据Laravel Orchid文档，添加带空选项的Select组件可通过->empty()方法实现，示例代码如下：

// 数组数据源
Select::make('user')
    ->options([
        1  => 'Option 1',
        2  => 'Option 2',
    ])
    ->empty('No select');

// 模型数据源
Select::make('user')
    ->fromModel(User::class, 'name')
    ->empty('No select');

但实际开发中按此方式实现时，空选项并未显示，只有给->empty()传入第二个参数（键值0）才会出现。同时希望页面加载时默认选中该空选项，当前Layout代码如下：

protected function layouts(): array
{
    $systems = OperatingSystem::pluck('name', 'id')->toArray();
    $versions = $this->query->get('operating_system_id') ?
        OperatingSystemVersion::where('operating_system_id', $this->query->get('operating_system_id'))->pluck('version', 'id')
        : $this->query['versions'];

    return [
        Layout::rows([
            Group::make([
                Select::make('operating_system_id')
                    ->title('System Name')
                    ->set('options', $systems)
                    ->empty('No os Selected', 0),

                Select::make('versions.id')
                    ->title('Version Name')
                    ->set('options', $versions)
                    ->empty(),
            ]),
        ])
    ];
}

解决步骤 #

1. 空选项显示问题

Orchid的->empty()方法默认空值为null，如果你的表单字段对应的数据库列不允许为null，或者前端渲染对null值处理有差异，就会导致空选项不显示。传入0作为第二个参数时能显示，是因为0是合法的数值型键。

如果想使用默认的null作为空选项键，有两种处理方式：

• 确保对应数据库字段允许null（比如operating_system_id设置为可空）；
• 手动将空选项合并到数据源数组中，无需调用->empty()：

  $systems = OperatingSystem::pluck('name', 'id')->prepend('No os Selected', null)->toArray();
  

2. 默认选中空选项

要让页面加载时默认选中空选项，需保证字段初始值与空选项的键一致：

• 若使用->empty()方法，在表单的query方法中给字段设置初始值为null（或你传入的第二个参数值，比如0）：

  public function query(Model $record): array
  {
      return [
          'operating_system_id' => $record->operating_system_id ?? null,
          // 其他字段...
      ];
  }
  

• 若手动添加空选项到数组，同样在query方法中设置字段初始值为null（对应空选项的键）即可自动选中。

另外，对于依赖第一个Select的versions.id组件，若要默认选中空选项，需确保其初始值为null，同时可在数据源中手动添加空选项。

调整后的代码示例 #

以手动添加空选项并默认选中为例，修改后的Layout代码：

protected function layouts(): array
{
    // 手动添加空选项到systems数组，键为null
    $systems = OperatingSystem::pluck('name', 'id')->prepend('No os Selected', null)->toArray();
    
    $versions = $this->query->get('operating_system_id') ?
        OperatingSystemVersion::where('operating_system_id', $this->query->get('operating_system_id'))->pluck('version', 'id')->prepend('No version Selected', null)->toArray()
        : ($this->query['versions'] ?? collect()->prepend('No version Selected', null)->toArray());

    return [
        Layout::rows([
            Group::make([
                Select::make('operating_system_id')
                    ->title('System Name')
                    ->options($systems),

                Select::make('versions.id')
                    ->title('Version Name')
                    ->options($versions),
            ]),
        ])
    ];
}

对应的query方法设置初始值：

public function query(Model $record): array
{
    return [
        'operating_system_id' => $record->operating_system_id ?? null,
        'versions.id' => $record->versions?->id ?? null,
        // 其他字段...
    ];
}

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