Select bindings in Svelte - Mini Project: Build & Apply

Select Bindings in Svelte

📖 Scenario: You are building a simple fruit picker app. Users can choose their favorite fruit from a dropdown list.

🎯 Goal: Create a Svelte component with a <select> dropdown bound to a variable. Show the selected fruit below the dropdown.

📋 What You'll Learn

Create a list of fruits as an array

Create a variable to hold the selected fruit

Bind the <select> element to the selected fruit variable

Display the selected fruit below the dropdown

💡 Why This Matters

🌍 Real World

Dropdown menus are common in forms and apps to let users pick one option from many. Binding the selection to a variable keeps the UI and data in sync.

💼 Career

Understanding how to bind form inputs in Svelte is essential for building interactive web apps that respond to user choices instantly.

1

Create the fruits array

Create an array called fruits with these exact values: "Apple", "Banana", "Cherry", "Date", "Elderberry".

Svelte

# Create an array called fruits with the given fruit names

// Your code here

Hint

Use let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"] to create the array.

2

Create the selected fruit variable

Create a variable called selectedFruit and set it to the string "Apple".

Svelte

let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

// Create a variable called selectedFruit and set it to "Apple"
// Your code here

Hint

Use let selectedFruit = "Apple" to create the variable.

3

Bind the select element to selectedFruit

Add a <select> element that uses bind:value={selectedFruit}. Inside it, use a {#each} block to create <option> elements for each fruit in fruits. Each option's value and text should be the fruit name.

Svelte

let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
let selectedFruit = "Apple"

Hint

Use <select bind:value={selectedFruit}> and inside it a {#each fruits as fruit} block with <option value={fruit}>{fruit}</option>.

4

Display the selected fruit

Below the <select>, add a <p> element that shows the text: Your favorite fruit is: {selectedFruit}.

Svelte

let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
let selectedFruit = "Apple"


  {#each fruits as fruit}
    {fruit}
  {/each}

Hint

Use <p>Your favorite fruit is: {selectedFruit}</p> below the select.

Practice

1. What does the bind:value directive do in a Svelte <select> element?

easy

A. It disables the select dropdown.

B. It styles the selected option with a special color.

C. It links the selected option to a variable, updating it automatically.

D. It creates a new option dynamically.

Solution

1. Step 1: Understand bind:value usage

   The bind:value directive connects the selected option's value to a variable in Svelte, so changes update the variable automatically.

2. Step 2: Analyze other options

   Options A, B, and D describe unrelated behaviors: disabling, styling, or creating options, which bind:value does not do.

3. Final Answer:

   It links the selected option to a variable, updating it automatically. -> Option C

4. Quick Check:

   Select binding = automatic variable update [OK]

Hint: Remember: bind:value syncs select with variable [OK]

Common Mistakes:

• Thinking bind:value styles the select
• Confusing bind:value with disabling the select
• Assuming bind:value adds options

2. Which of the following is the correct syntax to bind a variable named color to a <select> element in Svelte?

easy

A. <select bind:value={color}>

B. <select bind:color>

C. <select value={color}>

D. <select bind:select={color}>

Solution

1. Step 1: Recall Svelte binding syntax

   In Svelte, to bind a variable to the value of a select, use bind:value={variable}.

2. Step 2: Check each option

   <select bind:value={color}> matches correct syntax. <select bind:color> uses incorrect binding name. <select value={color}> only sets value but does not bind. <select bind:select={color}> uses invalid binding name.

3. Final Answer:

   <select bind:value={color}> -> Option A

4. Quick Check:

   Correct bind syntax = bind:value={variable} [OK]

Hint: Use bind:value={variable} for select binding [OK]

Common Mistakes:

• Using bind:color instead of bind:value
• Setting value without bind
• Using incorrect binding names

3. Given this Svelte code:

  <script>
    let fruit = 'apple';
  </script>

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

  <p>Selected fruit: {fruit}</p>

What will be displayed initially in the paragraph?

medium

A. Selected fruit: (empty)

B. Selected fruit: banana

C. Selected fruit: cherry

D. Selected fruit: apple

Solution

1. Step 1: Check initial variable value

   The variable fruit is initialized to 'apple'.

2. Step 2: Understand binding effect

   The select binds its value to fruit, so the option with value 'apple' is selected initially, and the paragraph shows that value.

3. Final Answer:

   Selected fruit: apple -> Option D

4. Quick Check:

   Initial variable value = displayed text [OK]

Hint: Initial variable sets selected option and displayed text [OK]

Common Mistakes:

• Assuming default select is empty
• Confusing option order with initial value
• Ignoring variable initialization

4. Identify the error in this Svelte code snippet:

<script>
  let choice;
</script>

<select bind:value=choice>
  <option value='1'>One</option>
  <option value='2'>Two</option>
</select>

medium

A. Missing curly braces around variable in bind:value

B. Options must have numeric values only

C. Variable choice must be initialized to a string

D. bind:value cannot be used on select

Solution

1. Step 1: Check bind:value syntax

   In Svelte, binding requires curly braces around the variable: bind:value={choice}.

2. Step 2: Verify other options

   Options A, B, and C are incorrect because bind:value is valid on select, options can have string values, and variables can be undefined initially.

3. Final Answer:

   Missing curly braces around variable in bind:value -> Option A

4. Quick Check:

   bind:value requires {variable} syntax [OK]

Hint: Always use curly braces in bind:value={variable} [OK]

Common Mistakes:

• Omitting curly braces in bind:value
• Thinking variables must be initialized
• Believing bind:value is invalid on select

5. You want to create a <select> in Svelte that allows users to pick a fruit, but if the user selects "None", the bound variable should be set to null instead of the string "none". Which approach correctly achieves this?

hard

A. Use <select bind:value={fruit}> with an <option value={null}>None</option>

B. Use <select bind:value={fruit}> and in a reactive statement set fruit = null if fruit === 'none'

C. Use <select bind:value={fruit}> and set the option value to undefined for None

D. Use <select bind:value={fruit}> and convert fruit to null on form submit only

Solution

1. Step 1: Understand option values and binding

   HTML option values are strings, so setting value={null} becomes "null" string, not JavaScript null.

2. Step 2: Use reactive statement to convert value

   Use <select bind:value={fruit}> and in a reactive statement set fruit = null if fruit === 'none' uses a reactive statement to watch fruit and set it to null when the string 'none' is selected, correctly converting the value.

3. Step 3: Analyze other options

   Use <select bind:value={fruit}> with an <option value={null}>None</option> incorrectly tries to bind null directly as value. Use <select bind:value={fruit}> and set the option value to undefined for None uses undefined which becomes string. Use <select bind:value={fruit}> and convert fruit to null on form submit only delays conversion, not reactive.

4. Final Answer:

   Use <select bind:value={fruit}> and in a reactive statement set fruit = null if fruit === 'none' -> Option B

5. Quick Check:

   Reactive conversion handles string to null correctly [OK]

Hint: Use reactive code to convert string 'none' to null [OK]

Common Mistakes:

• Trying to bind null directly as option value
• Assuming option values can be non-string
• Delaying conversion until form submit