如何使用 Svelte 中动态创建的选项绑定选择输入的值答案

【问题标题】：How to bind the value of a select input, with dynamically created options in Svelte如何使用 Svelte 中动态创建的选项绑定选择输入的值
【发布时间】：2020-01-08 20:41:44
【问题描述】：

我有一个带有选择输入的苗条组件，它填充了来自外部源的数据。

如何绑定选择输入以选择特定选项。

如果我将选项值或选定值设为静态，它似乎可以正常工作，但如果两者都是动态的，则不会。

这是我的代码

<script>
    export let params = {}

    let seasons = [];
    let selected = '';

    onMount(async () => {
        selected = params.seasonId; 
    /* fetch is called here and returns a list of seasons, which is passed to seasons array */
    })
</script>

<p><select bind:value={selected}>
    <option value="" disabled>-- Select Season --</option>
    {#each seasons as season}
    <option value={season.id}>{season.description}</option>
    {/each}
</select></p>
<p>param: {params.seasonId}</p>
<p>Selected: {selected}</p>

从代码来看，这是 HTML 输出。

<p><select>
    <option value="" disabled>-- Select Season --</option>
    <option value="4">2019</option>
    <option value="3">2018</option>
    <option value="2">2017</option>
    <option value="1">2016</option>
</select></p>
<p>param: 3</p>
<p>Selected: 3</p>

我希望页面加载后，选项 3“2018”会被选中，但不会改变，“-- Select Season --”是选中的选项。

【问题讨论】：

标签： data-binding drop-down-menu svelte-3

【解决方案1】：

你应该额外设置选项的selected属性：

 <option value={season.id} selected={selected === season.id}>{season.description}</option>

详情请看：https://github.com/sveltejs/svelte/issues/2844

【讨论】：

【解决方案2】：

这应该可以正常工作。

没有看到更多代码，我的猜测是params.seasonId 和season.id 是不同的类型（一个字符串和另一个数字）

【讨论】：

【解决方案3】：

在您的代码的这个简化示例中，这似乎有效：https://svelte.dev/repl/d95c63158f944ce996aaef092e4bff73?version=3.12.1

我必须注意，如果您将初始选定的值更改为

let selected = 3;

它不再起作用，所以问题在于 params.seasonId 的值

【讨论】：