Select bindings in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the select value to the variable.

Svelte

<script>
  let color = 'red';
</script>

<select [1]={color}>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Drag options to blanks, or click blank then click option'

Abind:select

Bbind:value

Cbind:option

Dbind:choice

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:select instead of bind:value

Trying to bind to bind:option or bind:choice which do not exist

In Svelte, to bind the selected value of a <select> element to a variable, use bind:value.

2fill in blank

medium

Complete the code to bind the selected option in a multiple select.

Svelte

<script>
  let selectedColors = [];
</script>

<select multiple [1]={selectedColors}>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Drag options to blanks, or click blank then click option'

Abind:items

Bbind:selected

Cbind:value

Dbind:options

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use bind:selected or bind:options which are not valid

Not using bind:value for multiple select

For multiple select elements, bind:value binds to an array of selected values.

3fill in blank

hard

Fix the error in the code to correctly bind the select value.

Svelte

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

<select [1]={fruit}>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

Drag options to blanks, or click blank then click option'

Abind:fruit

Bbind:choice

Cbind:selection

Dbind:value

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:fruit which is not a valid binding

Trying to bind to bind:selection or bind:choice

The correct binding for the selected value is bind:value. Other bindings like bind:fruit do not work.

4fill in blank

hard

Fill both blanks to bind the select value and handle change event.

Svelte

<script>
  let city = 'Paris';
  function handleChange(event) {
    city = event.target.[1];
  }
</script>

<select [2]={city} on:change={handleChange}>
  <option value="Paris">Paris</option>
  <option value="London">London</option>
  <option value="Tokyo">Tokyo</option>
</select>

Drag options to blanks, or click blank then click option'

Avalue

Bselected

Cbind:value

Dbind:selected

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'selected' instead of 'value' in event target

Using 'bind:selected' instead of 'bind:value'

The event target's value property holds the selected option's value. The select element binds with bind:value.

5fill in blank

hard

Fill all three blanks to bind a select with options from an array and show the selected value.

Svelte

<script>
  let fruits = ['Apple', 'Banana', 'Cherry'];
  let selectedFruit = fruits[0];
</script>

<select [1]={selectedFruit}>
  {#each fruits as BLANK_2}
    <option value=[2]>[2]</option>
  {/each}
</select>

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

Drag options to blanks, or click blank then click option'

Abind:value

Bfruit

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inside the each block

Not binding the select value properly

Use bind:value to bind the select value. The {#each} block iterates over fruits with variable fruit. The option's value and text use fruit.