We want to make this open-source project available for people all around the world.

Help to translate the content of this tutorial to your language!

BuyEPUB/PDF
Share
back to the lesson

Add an option to select

importance: 5

There’s a <select>:

<select id="genres">
 <option value="rock">Rock</option>
 <option value="blues" selected>Blues</option>
</select>

Use JavaScript to:

  1. Show the value and the text of the selected option.
  2. Add an option: <option value="classic">Classic</option>.
  3. Make it selected.

Note, if you’ve done everything right, your alert should show blues.

The solution, step by step:

<select id="genres">
 <option value="rock">Rock</option>
 <option value="blues" selected>Blues</option>
</select>
<script>
 // 1)
 let selectedOption = genres.options[genres.selectedIndex];
 alert( selectedOption.value );
 // 2)
 let newOption = new Option("Classic", "classic");
 genres.append(newOption);
 // 3)
 newOption.selected = true;
</script>

AltStyle によって変換されたページ (->オリジナル) /