Svelte中如何给select下拉框添加placeholder？加selected属性后显示空白怎么办

问题原因&修复方案 #

你使用的是Svelte模板语法，占位符区域空白可按以下优先级排查修复：

• 传入的placeholder变量为空/未定义
  先替换为写死的占位文本测试：

  <option value="" disabled selected>请选择</option>
  

  写死后能正常显示的话，直接检查上层组件的placeholder参数传参逻辑即可。
• select绑定的初始值与占位option的value不匹配
  如果你给select加了bind:value绑定变量，必须保证绑定变量的初始值和占位option的value完全一致：占位option的value是空字符串""，对应select的初始值也要设为""，如果初始值是null/undefined，浏览器找不到匹配的option就会显示空白。
• 模板换行导致解析异常
  把option标签的内容和标签写在同一行，避免模板引擎解析换行符生成无效空白节点：

  <option value={option.value}>{option.label || option.text}</option>
  

如果需要展开下拉列表时不显示占位选项，给占位option添加hidden属性即可：

<option value="" disabled selected hidden>{placeholder}</option>

完整可运行代码参考 #

<script>
    let placeholder = '请选择选项'
    let selectedValue = '' // 初始值要和占位option的value保持一致
    let options = [
        {value: '1', label: '选项1'},
        {value: '2', label: '选项2'}
    ]
</script>

<select bind:value={selectedValue}>
    {#if placeholder}
        <option value="" disabled selected>{placeholder}</option>
    {/if}
    {#each options as option}
        <option value={option.value}>{option.label || option.text}</option>
    {/each}
</select>

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