Bindings / Select multiple • Svelte Tutorial

Bases de Svelte Bindings 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>

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

Press and hold the control key (or the command key on MacOS) to select multiple options.

Modifier cette page sur Github

précédent suivant

Group inputs Textarea inputs

<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