Basic Svelte
Introduction
Bindings
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
Stores
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
We can also use bind:value with <select> elements:
App
<select
bind:value={selected}
onchange={() => answer = ''}
>Note that the <option> values are objects rather than strings. Svelte doesn’t mind.
Because we haven’t set an initial value of
selected, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised,selectedremains undefined, so we can’t blindly reference e.g.selected.idin the template.
previous next
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
54
55
56
<script>
let questions = $state([
{id: 1,
text: `Where did you go to school?`
},
{id: 2,
text: `What is your mother's name?`
},
{id: 3,
text: `What is another personal fact that an attacker could easily find with Google?`
}
]);
let selected = $state();
let answer = $state(''); function handleSubmit(e) {e.preventDefault();
alert(
`answered question ${selected.id} (${selected.text}) with "${answer}"`);
}
</script>
<h2>Insecurity questions</h2>
<form onsubmit={handleSubmit}><select
value={selected} onchange={() => (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>
selected question {selected? selected.id
: '[waiting...]'}
</p>