时间戳

首页 > 解决方案 > 在苗条中选择元素占位符？

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

问题描述

我正在尝试为 select 元素添加一个占位符，当我为第一个选项添加属性时，我看到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>

占位符图片 在此处输入图像描述

标签： javascripttypescriptsvelte

解决方案

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

<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

推荐阅读