Select bindings in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when selecting an option?

Consider this Svelte component with a select bound to selected. What will be the value of selected after choosing the option labeled "Two"?

Svelte

  <script>
    let selected = '1';
  </script>
  <select bind:value={selected}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

A "2" (string)

B 2 (number)

C "Two" (string label)

D undefined

💡 Hint

Remember that HTML option values are always strings unless converted.

The value attribute of an option is always a string. Binding selected to value means selected will be a string matching the chosen option's value.

❓ state_output

intermediate

What is the value of the bound variable after multiple selections?

Given this Svelte code with a multiple select, what will be the value of selected after the user selects "Apple" and "Cherry"?

Svelte

  <script>
    let selected = [];
  </script>
  <select bind:value={selected} multiple>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select>

A ["Apple", "Cherry"]

B "apple,cherry"

C ["apple", "cherry"]

D undefined

💡 Hint

Multiple select bindings use arrays of strings matching option values.

When multiple is set, the bound variable is an array of strings representing the selected option values.

📝 Syntax

advanced

Which option correctly binds a select to a number variable?

You want to bind a select's value to a number variable count. Which code snippet correctly achieves this in Svelte?

A <script>let count = 1;</script><select bind:value={count}><option value={1}>One</option><option value={2}>Two</option></select>

B <script>let count = 1;</script><select bind:value={count}><option value="1">One</option><option value="2">Two</option></select>

C <script>let count = 1;</script><select bind:value={+count}><option value="1">One</option><option value="2">Two</option></select>

D <script>let count = 1;</script><select bind:value={count}><option value={"1"}>One</option><option value={"2"}>Two</option></select>

💡 Hint

Binding to a number requires option values to be numbers, not strings.

Using value={1} sets the option value as a number. Binding count to value keeps it a number. Using strings will keep count as a string.

🔧 Debug

advanced

Why does this multiple select binding not update the variable?

Given this Svelte code, why does selected remain empty after selecting options?

Svelte

  <script>
    let selected = [];
  </script>
  <select bind:value={selected}>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </select>

A Because the <code>bind:value</code> syntax is incorrect and should be <code>bind:selected</code>.

B Because the variable <code>selected</code> is initialized as an array instead of a string.

C Because option values must be numbers for binding to work.

D Because the <code>multiple</code> attribute is missing on the <code>select</code> element.

💡 Hint

Multiple selections require a special attribute on the select element.

Without the multiple attribute, the select only allows one choice and binding expects a string, not an array. So the array selected does not update.

🧠 Conceptual

expert

How does Svelte handle select binding with complex objects?

In Svelte, if you bind a select to a variable and use option elements with value set to objects, what happens when you select an option?

Svelte

  <script>
    let selected;
    const options = [
      { id: 1, name: 'One' },
      { id: 2, name: 'Two' }
    ];
  </script>
  <select bind:value={selected}>
    {#each options as option}
      <option value={option}>{option.name}</option>
    {/each}
  </select>

A The variable <code>selected</code> will be undefined because objects cannot be serialized.

B The variable <code>selected</code> will be the exact object selected from the options array.

C Svelte throws a runtime error because option values cannot be objects.

D The variable <code>selected</code> will be a string "[object Object]" regardless of selection.

💡 Hint

Svelte supports binding non-primitive values like objects in select options using strict equality.

Unlike plain HTML, Svelte stores the original JS value (the object reference) in a private property on the option BOM element and uses === to determine which option is selected and to update the bound variable accordingly. This allows seamless binding of objects, numbers, dates, etc.

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