SvelteKit动态下拉框表单提交后后端获取空对象，求排查

你的后端收到空对象主要有两个核心问题：

1. 表单控件缺少name属性 #

HTML表单提交时，是通过表单元素（如<select>）的name属性来标识字段的，而你把name写在了<option>标签上，这是错误的。浏览器只会收集带有name属性的表单控件的值，所以后端自然拿不到数据。

修复：将name移到<select>标签上 #

修改第一个下拉框：

<select
    class="select select-accent w-full max-w-xs"
    name="user" <!-- 把name放在这里 -->
    value={selectedUser}
    on:change={handleUserChange}
>
    <option disabled selected>Select a User</option>
    {#each data.userData as user}
        <option value={user.user}>{user.user}</option> <!-- 移除option上的name -->
    {/each}
</select>

修改第二个下拉框：

<select
    class="select select-accent w-full max-w-xs"
    name="course" <!-- 把name放在这里 -->
    value={selectedAsset}
    on:change={handleCourseChange}
>
    <option disabled selected>Select a Course</option>
    {#each data.userData.find((user) => user.user === selectedUser)?.courses || [] as course}
        <option value={course}>{course}</option> <!-- 移除option上的name -->
    {/each}
</select>

2. 按钮类型错误导致表单未提交 #

你使用了type="button"的按钮，这种按钮不会触发表单的提交行为，只是执行点击事件里的代码（仅打印日志），所以后端根本没收到任何请求。

修复：改为提交按钮 #

有两种方式：

方式一：直接用type="submit"按钮

将按钮改为提交类型，同时保留日志打印（可以通过表单的on:submit事件触发）：

<form action="?/userSelection" method="POST" on:submit={showSelection}>
    <!-- 其他表单元素 -->
    <button type="submit">提交选择</button>
</form>

方式二：手动触发表单提交（保留原按钮类型）

如果想继续用type="button"，需要在showSelection里手动提交表单：

async function showSelection() {
    console.log('Selected User:', selectedUser);
    console.log('Selected Course:', selectedAsset);
    // 手动提交表单
    document.querySelector('form').submit();
}

额外优化（可选，更符合Svelte风格） #

在Svelte中，你可以用bind:value替代value+on:change的组合，自动同步变量值，还能通过响应式语句自动重置资产选择：

<script>
    export let data;

    let selectedUser = '';
    let selectedAsset = '';

    // 当选中用户变化时，自动清空资产选择
    $: if (selectedUser) {
        selectedAsset = '';
    }

    async function showSelection() {
        console.log('Selected User:', selectedUser);
        console.log('Selected Course:', selectedAsset);
    }
</script>

<!-- 下拉框改为bind:value -->
<select
    class="select select-accent w-full max-w-xs"
    name="user"
    bind:value={selectedUser}
>
    <!-- ... -->
</select>

<select
    class="select select-accent w-full max-w-xs"
    name="course"
    bind:value={selectedAsset}
>
    <!-- ... -->
</select>

这样可以去掉handleUserChange和handleCourseChange两个函数，代码更简洁。

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