绑定 / 多选列表框 • Svelte Tutorial

Svelte基础绑定多选列表框

小主，你是不是想起了另一个能实现多选的Dom元素。没错，只要给select添加上multiple属性它就可以多选了, 它的值就是个数组了。来动手试下，把复选框换成<select multiple>

A <select> element can have a multiple attribute, in which case it will populate an array rather than selecting a single value. Replace the checkboxes with a <select multiple>:

App

<h2>Flavours</h2>

<select multiple bind:value={flavours}>
	{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
		<option>{flavour}</option>
	{/each}
</select>

注意我们省略掉了<option>的value属性，因为可以直接从它的内容确定它的值。

Note that we’re able to omit the value attribute on the <option>, since the value is identical to the element’s contents.

需要按着 control (Ctrl)键 (command键如果你用的是MacOS)多选. [!NOTE] Press and hold the control key (or the command key on MacOS) to select multiple options.

Edit this page on GitHub

previous next

输入框组多行文本输入框

<script>

	let scoops = $state(1);

	let flavours = $state([]);

	const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });

</script>

<h2>Size</h2>

{#each [1, 2, 3] as number}

	<label>

		<input

			type="radio"

			name="scoops"

			value={number}

			bind:group={scoops}

/>

		{number} {number === 1 ? 'scoop' : 'scoops'}

	</label>

{/each}

<h2>Flavours</h2>

{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}

	<label>

		<input

			type="checkbox"

			name="flavours"

			value={flavour}

			bind:group={flavours}

/>

		{flavour}

	</label>

{/each}

{#if flavours.length === 0}

	<p>Please select at least one flavour</p>

{:else if flavours.length > scoops}

	<p>Can't order more flavours than scoops!</p>

{:else}

<p>

		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}

		of {formatter.format(flavours)}

	</p>

{/if}

show text show editor