反应性地重置 select 小部件

Question

我有一个包含两个 select 小部件的页面，简单的用例是，当用户更改第一个小部件上的 selection 时，应该清除第二个 select .

它实际上是这样工作的，其中 selectedValue1 和 selectedValue2 是两个 select 的 selected 选项，但感觉很老套

$: selectedValue2 = (selectedValue1) ? '' : '';

是否有针对此类用例的更简洁、更优雅的实现？

Answer 1

使用事件侦听器：

<select
  bind:value={selectedValue1}
  on:change="{() => selectedValue2 = null}"
>...</select>

<select
  bind:value={selectedValue2}
>...</select>

Demo here。请注意，我正在使用 svelte-ignore a11y-no-onchange 否则它会抱怨使用 change 事件，我认为在这种情况下可能没问题。