Svelte中如何获取select选中的数组项并正确提交表单数据

嘿，我看你遇到的问题是：表单里的select选完用户后，提交时formData里还是带着整个users数组，而不是你选中的那一个用户对吧？咱们来一步步搞定这个问题～

问题根源 #

你当前的formData.users是整个用户数组，而且select并没有和formData里专门用来存储选中项的属性绑定，所以提交时自然还是原封不动的整个数组。另外，你的input标签里的on:input事件是冗余的——因为已经用了bind:value，它会自动双向同步值，不需要额外手动赋值。

修复步骤 #

1. 在formData中添加选中项存储属性
   先给formData加一个用来存选中用户ID（或整个用户对象）的属性，比如selectedUserId：

   let users_options = [
     {id:22, name: "lana"},
     {id:33,name:"John"}, // 这里你原来少了个逗号，记得补上哦
     {id:45,name:"avril"}
   ]
   let formData = {
     id:5,
     users: users_options,
     name:"",
     email:"",
     selectedUserId: null // 新增：存储选中用户的ID
   }
   

2. 给select绑定选中属性
   修改select标签，用bind:value绑定新增的selectedUserId，同时option的value用用户的ID（比用name更准确，避免重名问题）：

   <select bind:value={formData.selectedUserId}>
     {#each formData.users as item (item.id)}
       <option value={item.id}>{item.name}</option>
     {/each}
   </select>
   

3. 提交时获取选中的完整用户对象
   在send函数里，根据存储的ID从users数组中找到对应的用户对象，构造只包含选中项的提交数据：

   function send(){
     // 根据ID找到选中的用户对象
     const selectedUser = formData.users.find(user => user.id === Number(formData.selectedUserId));
     // 构造最终提交的数据，去掉原users数组，换成选中的用户
     const submitData = {
       ...formData,
       selectedUser,
       users: undefined // 移除整个数组，避免提交不必要的数据
     };
     console.log(submitData);
   }
   

4. 去掉冗余的input事件
   把input标签里的on:input事件删掉，因为bind:value已经自动同步值了：

   <label>name</label>
   <br>
   <input type="text" bind:value={formData.name} />
   <label>email</label>
   <input type="email" bind:value={formData.email} />
   

完整修复后的代码 #

<script>
 let users_options = [
   {id:22, name: "lana"},
   {id:33,name:"John"},
   {id:45,name:"avril"}
 ]
 let formData = {
   id:5,
   users: users_options,
   name:"",
   email:"",
   selectedUserId: null
 }
 function send(){
   const selectedUser = formData.users.find(user => user.id === Number(formData.selectedUserId));
   const submitData = {
     ...formData,
     selectedUser,
     users: undefined
   };
   console.log(submitData);
 }
</script>
<form on:submit|preventDefault={send}>
 <label>name</label>
 <br>
 <input type="text" bind:value={formData.name} />
 <label>email</label>
 <input type="email" bind:value={formData.email} />
 <label>Select user</label><br>
 <select bind:value={formData.selectedUserId}>
   {#each formData.users as item (item.id)}
     <option value={item.id}>{item.name}</option>
   {/each}
 </select>
 <button type="submit">Submit</button> <!-- 记得加个提交按钮哦 -->
</form>

这样提交时，你就能得到只包含选中用户的提交数据，而不是整个users数组啦～

内容的提问来源于stack exchange，提问作者Matias Arturo González Roa