第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY12-下拉選單的設定

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呈現下拉選單,以及如何綁定變數,希望大家會喜歡。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *