A select can have a multiple
attribute, in which case it will populate an array rather than selecting a single value.
Returning to our earlier ice cream example, we can replace the checkboxes with a <select multiple>
:
<h2>Flavours</h2>
<select multiple bind:value={flavours}>
{#each menu as flavour}
<option value={flavour}>
{flavour}
</option>
{/each}
</select>
App.svelte
xxxxxxxxxx
53
1
<script>
2
let scoops = 1;
3
let flavours = ['Mint choc chip'];
4
5
let menu = [
6
'Cookies and cream',
7
'Mint choc chip',
8
'Raspberry ripple'
9
];
10
11
function join(flavours) {
12
if (flavours.length === 1) return flavours[0];
13
return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
14
}
15
</script>
16
17
<h2>Size</h2>
18
19
<label>
20
<input type=radio bind:group={scoops} value={1}>
Console
xxxxxxxxxx
400
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
append,
5
attr,
6
destroy_each,
7
detach,
8
element,
9
empty,
10
get_binding_group_value,
11
init,
12
insert,
13
listen,
14
noop,
15
run_all,
16
safe_not_equal,
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */