svelte設定下拉選單

昨天跟大家分享完 html 的 input 的屬性綁定，不過還有型態比較特別的 select 跟 option 今天繼續跟大家分享。

select的格式

大家應該很熟悉 html 中 select 的格式，接下來要跟大家分享在 svelte 中 select 跟 option 要怎麼使用。

基本的select

介紹之前先請大家看一下下列式子。

<select bind:value={selected}>
    <option value={a}>a</option>
    <option value={b}>b</option>
    <option value={c}>c</option>
</select>

基本上跟html的撰寫方式沒有差別，相信看過前面幾篇的朋友都知道 內的都是變數，這時就把 seleted 跟選擇的項目綁定再一起，選擇的項目可以用 seleted 呈現或是使用。

複選的select

在認識基本的 select 後如果要做一個可以複選的 select 只要在 select 上加上 multiple 關鍵字即可，結果如下式子。

<select multiple bind:value={fillings}>
    <option value="Rice">Rice</option>
    <option value="Beans">Beans</option>
    <option value="Cheese">Cheese</option>
    <option value="Guac (extra)">Guac (extra)</option>
</select>

最後上述例子如果當value與呈現的值相同時可以加以省略如下列式子所示。

<select multiple bind:value={fillings}>
    <option>Rice</option>
    <option>Beans</option>
    <option>Cheese</option>
    <option>Guac (extra)</option>
</select>

結合之前所學

如果再搭配之前所學，我們可以很快完成一個動態的下拉選單。

<script>
    let list=['kirai','joe','jay'];
    let selected='kirai';
</script>

<h1>Hello {selected}!</h1>
<select multiple bind:value={selected} >
{#each list as item}
<option>{item}</option>
{/each}
</select>

小結

今天跟大家分享一下如何在svelte呈現下拉選單，以及如何綁定變數，希望大家會喜歡。