JavaScript에서 현재 선택된 옵션

각 필드가 특정 유형인 웹 페이지에서 다양한 유형의 양식을 가질 수 있습니다. 때로는 드롭다운 목록에서 옵션을 선택해야 합니다. <select> 요소는 드롭다운 목록을 만드는 데 사용됩니다. <select> 태그 내의 <option> 태그는 드롭다운 목록에서 옵션을 정의하는 데 사용됩니다.

이 튜토리얼에서는 JavaScript를 사용하여 <select> 요소에서 현재 선택된 옵션을 가져오는 방법을 소개합니다.

HTMLSelectElement.options를 사용하여 JavaScript를 사용하여 선택 목록에서 현재 옵션 가져오기

HTMLSelectElement.options 속성은 <select> 요소에 있는 <option> 요소의 HtmlOptionsCollections를 반환합니다.

목록에서 선택한 옵션의 값을 표시하는 함수를 만들 수 있습니다.

아래 코드를 확인하세요

HTML 코드:

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

자바스크립트 코드:

var selection = document.getElementById('cars');
function select() {
  alert(selection.options[selection.selectedIndex].value);
}

selectedIndex는 선택한 옵션의 인덱스를 반환합니다.

HTMLSelectElement.selectedOptions를 사용하여 JavaScript를 사용하여 선택 목록에서 현재 옵션 가져오기

이 HTMLSelectElement.selectedOptions에는 선택된 <select> 요소에 정의된 모든 <option> 요소 목록이 포함되어 있습니다.

아래 코드를 확인하세요.

HTML 코드:

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

자바스크립트 코드:

var selection = document.getElementById('cars');
function select() {
  alert(selection.selectedOptions[0].value);
}

이 방법은 일반적으로 Internet Explorer에서 작동하지 않습니다.