Select bindings in Svelte - Step-by-Step Execution

Concept Flow - Select bindings

Initialize variable

↓

Render <select> with options

↓

User selects option

↓

Update bound variable

↓

Re-render UI with new value

The flow shows how a variable is linked to a <select> element. When the user picks an option, the variable updates automatically, and the UI reflects the change.

Execution Sample

Svelte

let fruit = 'apple';

<select bind:value={fruit}>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

<p>You selected: {fruit}</p>

This code binds the variable 'fruit' to the select element. Changing the selection updates 'fruit' and the displayed text.

Execution Table

Step	Action	Variable 'fruit' Value	UI Displayed Text
1	Initialize fruit = 'apple'	apple	You selected: apple
2	Render <select> with 'apple' selected	apple	You selected: apple
3	User selects 'banana'	banana	You selected: banana
4	UI updates to show new fruit	banana	You selected: banana
5	User selects 'cherry'	cherry	You selected: cherry
6	UI updates to show new fruit	cherry	You selected: cherry
7	User selects 'apple' again	apple	You selected: apple

💡 User stops changing selection; variable and UI stay synced.

Variable Tracker

Variable	Start	After Step 3	After Step 5	After Step 7
fruit	apple	banana	cherry	apple

Key Moments - 2 Insights

Why does the displayed text update immediately when I pick a new option?

Because the select's value is bound to the variable 'fruit', changing the selection updates 'fruit' instantly, which triggers the UI to re-render with the new value (see execution_table steps 3 and 4).

What happens if I don't use 'bind:value' on the select?

Without 'bind:value', the variable won't update when the user picks a new option, so the displayed text won't change (no automatic syncing). This breaks the connection shown in the execution_table.

Visual Quiz - 3 Questions

Look at the execution table. What is the value of 'fruit' after step 5?

A banana

B cherry

C apple

D undefined

💡 Hint

Check the 'Variable 'fruit' Value' column at step 5 in the execution_table.

At which step does the UI first show 'You selected: banana'?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'UI Displayed Text' column in the execution_table for when it changes to banana.

If the user never changes the selection, what will the variable 'fruit' be?

A banana

B cherry

C apple

D null

💡 Hint

See the initial value in variable_tracker and execution_table step 1.

Concept Snapshot

Svelte select binding:
Use <select bind:value={variable}> to link a variable to the select.
When user picks an option, variable updates automatically.
UI updates reactively to show current variable value.
No manual event handling needed.
Keeps variable and UI in sync easily.

Full Transcript

This example shows how Svelte binds a variable to a select element using bind:value. Initially, the variable 'fruit' is set to 'apple'. The select renders with 'apple' selected. When the user picks a different option like 'banana' or 'cherry', the variable updates immediately. The UI text below the select also updates to show the current selection. This happens automatically without extra code. The execution table traces each step: initialization, user selection, variable update, and UI re-render. The variable tracker shows how 'fruit' changes over time. Key moments clarify why the UI updates instantly and what happens if binding is missing. The quiz tests understanding of variable values and UI changes at specific steps. This method makes select inputs easy to manage and keeps data and UI perfectly synced.