Skip to main content

Ta cũng có thể dùng bind:value cho phần tử <select>:

App.svelte
<select
	bind:value={selected}
	on:change={() => answer = ''}
>

Để ý rằng giá trị của <option> là đối tượng thay vì là dải kí tự. Svelte không quan tâm đâu.

Bời vì ta chưa đặt giá trị đầu cho selected, phép bind sẽ tự đặt nó thành giá trị mặc định (giá trị đầu tiên trong danh sách). Nhưng bạn phải cẩn trọng — cho đến khi phép bind được khởi chạy, selected sẽ vẫn là undefined, nên ta không thể lấy giá trị một cách mù quáng, v.d dùng selected.id trong template.

Tiếp theo: Nhóm input

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
47
48
49
50
51
52
53
<script>
	let questions = [
		{
			id: 1,
			text: `Bạn học ở trường gì?`
		},
		{
			id: 2,
			text: `Tên của cha hoặc mẹ bạn?`
		},
		{
			id: 3,
			text: `Bạn có một sự thật nào mà những kẻ tấn công có thể dễ dàng tìm kiếm được trên mạng?`
		}
	];
 
	let selected;
 
	let answer = '';
 
	function handleSubmit() {
		alert(
			`Câu trả lời #${selected.id} (${selected.text}) là "${answer}"`
		);
	}
</script>
 
<h2>Câu hỏi không bảo mật</h2>
 
<form on:submit|preventDefault={handleSubmit}>
	<select
		value={selected}
		on:change={() => (answer = '')}
	>
		{#each questions as question}
			<option value={question}>
				{question.text}
			</option>
		{/each}
	</select>
 
	<input bind:value={answer} />
 
	<button disabled={!answer} type="submit">
		Submit
	</button>
</form>
 
<p>
	đã chọn câu hỏi #{selected
		? selected.id
		: '[waiting...]'}
</p>
initialising