回到课程

在 select 元素中增加一个选项

重要程度: 5

下面是一个 <select> 元素:

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

使用 JavaScript 来实现以下效果:

  1. 显示所选选项的值和文本。
  2. 增加一个选项:<option value="classic">Classic</option>
  3. 使之变为可选的。

解决方案:逐步解决

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

<script>
  // 1)
  let selectedOption = genres.options[select.selectedIndex];
  alert( selectedOption.value );

  // 2)
  let newOption = new Option("classic", "Classic");
  select.append(newOption);

  // 3)
  newOption.selected = true;
</script>