돌아가기

select에 옵션 추가하기

중요도: 5

아래에 <select>가 있습니다.

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

자바스크립트를 사용하여 아래 항목을 수행하는 코드를 작성해봅시다.

  1. 선택한 옵션의 값과 텍스트를 표시하세요.
  2. <option value="classic">Classic</option>라는 옵션을 추가하세요.
  3. 추가한 옵션을 선택하세요.

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

단계별 해답입니다.

<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>