如何在on:change事件中直接使用select元素的选中对象值？

直接获取选中对象的方法 #

如果不想定义中间变量selectedItem，可以通过选中选项的索引直接从选项数组中获取对应的对象，示例代码如下：

<script>
  const options = [
    { id: 1, name: "选项1" },
    { id: 2, name: "选项2" }
  ];

  function doSomething(item) {
    console.log("选中的对象：", item);
  }
</script>

<select on:change={(e) => {
  const selectedIndex = e.target.selectedIndex;
  // 直接通过索引从选项数组中取对象
  doSomething(options[selectedIndex]);
}}>
  {#each options as option}
    <option>{option.name}</option>
  {/each}
</select>

这里不需要给option设置value属性（或者随便设字符串值也不影响），直接通过selectedIndex定位到数组中的对象即可。

为什么bind:value能用但on:change无法直接拿对象？ #

核心原因在于原生HTML和Svelte绑定逻辑的差异：

1. 原生限制：原生<select>和<option>的value属性仅支持字符串类型，无法直接存储或传递对象。所以event.target.value只能返回字符串，拿不到你绑定的对象。
2. Svelte的语法糖：bind:value={selectedItem}是Svelte提供的语法糖，它在底层做了额外处理：
   • 给每个<option>关联对应的对象；
   • 当选项选中时，自动把对应的对象赋值给selectedItem，绕开了原生只能用字符串的限制。
     但这套逻辑是Svelte内部维护的，原生on:change事件无法直接访问到Svelte关联的对象，所以你没法在事件回调里直接拿到选中的对象，必须通过数组索引或者中间变量间接获取。

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