[JS] select에서 선택한 값 가져오기

 

코드

<select onchange="changeValue(this)">
  <option value="빨강">빨강색</option>
  <option value="노랑">노랑색</option>
  <option value="초록">초록색</option>
</select>

const changeValue = (target) => {
  // 선택한 option의 value 값
  console.log(target.value);
  
  // option의 text 값
  console.log(target.options[target.selectedIndex].text);
}

 

반응형

코드 설명

 

select 요소에서 value 키워드로 접근, value 값을 가져올 수 있습니다.

 

선택한 text 값은 해당 select 요소에서 현재 선택한 option의 인덱스 값으로 가져올 수 있고, 해당 값에서 option 목록을 지정해 해당 text 값을 가져올 수 있습니다.