Nova Laravel中无需第三方库实现Select选中值动态填充Text字段

以下方案完全使用Nova原生能力，无需引入任何第三方库，适配Nova 3、Nova 4主流版本。

Nova 4.x 推荐方案（使用原生联动API） #

Nova 4及以上版本自带dependsOn联动方法和reactive响应式标记，直接调用即可实现需求：

首先定义你动态获取的选项数组：

$options = [
    100 => "First Option",
    101 => "Second Option",
    102 => "Third Option"
];

字段定义代码如下：

Select::make('Option')
    ->options($options)
    ->reactive(), // 必须加此标记，字段值变化时会触发联动

Text::make('Option Name')
    ->readonly()
    ->dependsOn(
        // 这里填写要监听的字段的数据库字段名，一般为小写蛇形格式
        ['option'],
        function (Text $field, NovaRequest $request, $formData) use ($options) {
            $selectedValue = $formData->option;
            // 选中值存在且在选项数组内时填充对应文本
            $field->setValue(
                isset($selectedValue) && isset($options[$selectedValue])
                ? $options[$selectedValue]
                : ''
            );
        }
    ),

注意事项：

• 若你的选项数组是动态从数据库/其他接口获取，直接把查询逻辑放在$options定义位置即可，闭包中通过use引入就能正常调用
• 新建、编辑场景下该联动逻辑都会自动生效

Nova 3.x 兼容方案（内嵌原生JS） #

Nova 3版本没有内置联动API，可以通过注入原生JS实现，同样不需要引入第三方依赖：

$options = [
    100 => "First Option",
    101 => "Second Option",
    102 => "Third Option"
];

Select::make('Option')
    ->options($options)
    ->withMeta(['extraAttributes' => [
        'id' => 'custom-option-select'
    ]]),

Text::make('Option Name')
    ->readonly()
    ->withMeta(['extraAttributes' => [
        'id' => 'custom-option-name'
    ]]),

// 注入原生JS脚本实现监听
\Laravel\Nova\Fields\Heading::make('')->asHtml(
    '<script>
        document.addEventListener("DOMContentLoaded", function() {
            const optionMap = ' . json_encode($options) . ';
            const selectEl = document.getElementById("custom-option-select");
            const textEl = document.getElementById("custom-option-name");
            selectEl.addEventListener("change", function() {
                textEl.value = optionMap[this.value] || "";
            });
        });
    </script>'
),

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