【问题标题】: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

【讨论】:

    猜你喜欢
    • 2017-11-03
    • 2022-01-19
    • 2022-09-23
    • 2021-02-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-27
    相关资源
    最近更新 更多