如何獲取在 select 中選擇的數組項？

Question

I have the following formData object which has the properties that I read from the input and the select, but I don't really understand how to make the select only select the option I choose, since when submitting it sends all the objects of the users數組而不是 select 中選擇的數組

 <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:"" } function send(){ console.log(formData); } </script> <form on:submit|preventDefault={send}> <label>name</label> <br> <input type="text" bind:value={formData.name} on:input={ e => (formData.name => e.target.value)} /> <label>email</label> <input type="email" bind:value={formData.email} on:input={ e => (formData.email => e.target.value)} /> <label>Select user</label><br> <select> {#each formData.users as item (item.id)} <option value={item.name}>{item.name}</option> {/each} </select> </form>

Answer 1

您可以將變量綁定到<select />元素以保留所選選項。 對其他表單字段執行相同操作將簡化代碼。

<script>
    let users_options = [
        {id:22, name: "lana"},
        {id:33, name:"John"},
        {id:45, name:"avril"}
    ]

    let name
    let email
    let user
    
    function send(){
        const formData = {
            name,
            email,
            user
        }
        console.log(formData);
    }
</script>

<form on:submit|preventDefault={send}>
    <label>name</label> <br>
    <input type="text" bind:value={name} />

    <label>email</label>
    <input type="email" bind:value={email} />

    <label>Select user</label><br>
    <select bind:value={user}>
        {#each users_options as item (item.id)}
            <option value={item}>{item.name}</option>
        {/each}
    </select><br>

    <button type=submit>
        Submit
    </button>
</form>

Answer 2

我真的建議您為表單的 state 使用 object，以便formData object 不包含所有users ，而只包含選定的名稱。 為此，您只需一個簡單的bind ：

<script>
 let users_options = [
    {id:22, name: "lana"},
    {id:33,name:"John"},
    {id:45,name:"avril"}
]

let formData = {
    id:5,
    user: null,
    name:"",
    email:""
}
</script>


<form on:submit|preventDefault={send}>
  <select bind:value={formData.user}>
    {#each users_options as user}
      <option value={user.name}>{user.name}</option>
    {/each}
  </select>
</form>

然后，當您向您發送 object 時，您只需在 users_options 中找到正確的user users_options 。 在現代 javascript 中，在find的幫助下實現它非常簡單：

function send() {
    console.log({
        ...formData,
        user: users_options.find(userOption => {
            return userOption.name === formData.user
        })
    });
}

所以最終的代碼是這樣的：

<script>

 let users_options = [
    {id:22, name: "lana"},
    {id:33,name:"John"},
    {id:45,name:"avril"}
]

let formData = {
    id:5,
    user: null,
    name:"",
    email:""
}
    
function send(){
    console.log({
        ...formData,
        user: users_options.find(userOption => {
            return userOption.name === formData.user
        })
    });
}
    
$: console.log(formData)


</script>


<form on:submit|preventDefault={send}>

  <label>name</label> <br>
  <input type="text" 
  bind:value={formData.name}
  on:input={ e => (formData.name = e.target.value)}
  />
  
  <label>email</label>
  
  <input type="email" bind:value={formData.email}
  on:input={ e => (formData.email = e.target.value)}
  />

  <label>Select user</label><br>
  
  <select bind:value={formData.user}>
    {#each users_options as user}
      <option value={user.name}>{user.name}</option>
    
    {/each}
  
  </select>
  
    <button type="submit">
        Submit
    </button>
</form>

看看REPL 。