反应性地重置选择小部件

Question

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

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

$: 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事件，在这种情况下，我认为可能很好。