Select svelte 中的元素占位符？

Question

我正在尝试为 select 元素添加一个占位符，当我为第一个选项添加 selected 属性时，我看到的只是一个空的 space .

<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>

占位符图片

Answer 1

select 初始值与占位符的空字符串不同，这就是默认情况下不 selected 的原因。确保将 select 值绑定到与初始化时的占位符匹配的变量，如下所示：

<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

Select svelte 中的元素占位符？

Select element placeholder in svelte?

javascript

typescript

svelte