svelte-select：如何在页面加载时展示API返回的选中选项

svelte-select 提供了value属性来设置初始选中值，完全可以解决页面刷新后展示后端返回已选中选项的需求，具体实现步骤如下：

核心实现逻辑 #

1. 确保数据结构匹配：后端返回的已选中数据，必须和你定义的下拉选项（options数组）结构一致。比如你的选项是{value: '唯一标识', label: '显示文本'}格式，后端返回的选中数据也得是相同结构的对象（多选场景则是数组）。
2. 绑定初始值到组件：将从后端获取到的已选中数据，绑定到svelte-select的value属性上即可。

示例代码 #

单选场景 #

<script>
  import Select from 'svelte-select';

  let selectedOption = null;
  const options = [
    { value: 'apple', label: '苹果' },
    { value: 'banana', label: '香蕉' },
    { value: 'orange', label: '橙子' }
  ];

  // 页面加载时请求后端获取已选中数据
  async function initSelectedData() {
    // 替换成你的后端接口
    const response = await fetch('/api/get-selected-item');
    selectedOption = await response.json();
  }

  // 初始化调用
  initSelectedData();
</script>

<Select
  {options}
  bind:value={selectedOption}
  placeholder="请选择选项"
/>

多选场景（开启multi属性） #

<script>
  import Select from 'svelte-select';

  let selectedOptions = [];
  const options = [
    { value: 'apple', label: '苹果' },
    { value: 'banana', label: '香蕉' },
    { value: 'orange', label: '橙子' }
  ];

  async function initSelectedData() {
    const response = await fetch('/api/get-selected-items');
    selectedOptions = await response.json();
  }

  initSelectedData();
</script>

<Select
  {options}
  bind:value={selectedOptions}
  multi={true}
  placeholder="请选择多个选项"
/>

关键注意事项 #

• 后端返回的数据必须保证value字段和options数组中对应项的value完全一致，svelte-select是通过value来匹配选中项的，字段不匹配会导致选中状态不生效。
• 处理异步加载的边界情况：如果后端接口请求较慢，可以在组件上添加加载状态提示，避免页面初始时的空状态。

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