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.