Блог

Я пытаюсь добавить заполнитель для элемента 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>
 

Изображение-заполнитель

Начальное значение select отличается от пустой строки заполнителя, поэтому по умолчанию оно не выбрано. Убедитесь, что значение 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>
 

Рабочая РЕПЛ: https://svelte.dev/repl/e1c7d9b804414f2d888b96b3e812a5c7?version=3.43.0