Skip to main content

Một phần tử <select> có thể có thuộc tính multiple, tức là nó sẽ phân ra thành một mảng thay vì chỉ có chọn một giá trị.

Thay các ô đánh dấu với <select multiple>:

App.svelte
<h2>Hương vị</h2>

<select multiple bind:value={flavours}>
	{#each ['bánh quy và kem', 'socola bạc hà', 'ngũ quả mâm xôi'] as flavour}
		<option>{flavour}</option>
	{/each}
</select>

Để ý rằng ta có thể bỏ thuộc tính value trên <option>, vì các giá trị giống với nội dung các phần tử.

Bấm giữ phím Control (hoặc command trên macOS) để có thể chọn nhiều lựa chọn.

Tiếp theo: Ô nhập Textarea

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script>
	let scoops = 1;
	let flavours = [];
 
	const formatter = new Intl.ListFormat('vi', { style: 'long', type: 'conjunction' });
</script>
 
<h2>Kích cỡ</h2>
 
{#each [1, 2, 3] as number}
	<label>
		<input
			type="radio"
			name="scoops"
			value={number}
			bind:group={scoops}
		/>
 
		{number} muỗng
	</label>
{/each}
 
<h2>Hương vị</h2>
 
{#each ['bánh quy và kem', 'socola bạc hà', 'ngũ quả mâm xôi'] as flavour}
	<label>
		<input
			type="checkbox"
			name="flavours"
			value={flavour}
			bind:group={flavours}
		/>
 
		{flavour}
	</label>
{/each}
 
{#if flavours.length === 0}
	<p>Hãy chọn một hoặc nhiều hương vị</p>
{:else if flavours.length > scoops}
	<p>Không thể đặt hương vị nhiều hơn muỗng kem!</p>
{:else}
	<p>
		Bạn đã đặt {scoops} muỗng {formatter.format(flavours)}
	</p>
{/if}
initialising