在苗条中选择元素占位符？

【问题标题】：Select element placeholder in svelte?在苗条中选择元素占位符？
【发布时间】：2021-09-24 12:14:28
【问题描述】：

我正在尝试为选择元素添加占位符，当我为第一个选项添加 selected 属性时，我看到的只是一个空白区域。

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

占位符图片

【问题讨论】：

由于某种原因，我的图片无法加载？

标签： javascript typescript svelte

【解决方案1】：

选择的初始值与占位符的空字符串不同，所以默认不选择。确保在初始化时将选择值绑定到与占位符匹配的变量，如下所示：

<script>
    let placeholder = 'hello world';
    let options = [{
        label: "Option 1",
        value: "option1"
    }, {
        label: "Option 2",
        value: "option2"
    }, {
        label: "Option 3",
        value: "option3"
    }];
    let selectedValue = "";
</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>

工作 REPL：https://svelte.dev/repl/e1c7d9b804414f2d888b96b3e812a5c7?version=3.43.0

【讨论】：