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