[ Javascript ] Select / Option에서 현재 선택된 Option 값

<selcet id="dropBox">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
</select>

select / option을 사용하면, 드롭박스 형태로 아이템을 표시할 수 있습니다. 

 

JS를 이용해서 다양한 조작을 할 수 있는데, 그 중에서 현재 선택된 option의 값을 가져오는 방법에 대해서 설명하겠습니다. 

 

selectedIndex

dropBox.selectedIndex

select요소에 selectedIndex 속성을 사용하면, 현재 선택되어진 option의 index 번호를 가져옵니다. 

0부터 시작하게 되므로, 위에서 One이 선택되어 있다면, 0의 값을 가져오게 됩니다. 

 

options

let seleted_idx = dropBox.selectedIndex;

dropBox.options[selected_idx]

options[idx]을 사용하게 되면, 해당 인덱스에 해당하는 option의 요소를 가져올 수 있습니다. 

 

Option의 Text값 

이젠, 이 options를 이용해서 다양한 것을 할 수 있고 이번에는 text값을 가져오도록 innerHTML사용 

let seleted_idx = dropBox.selectedIndex;

let textOfSelectedOption = dropBox.options[selected_idx].innerHTML;

console.log(textOfSelectedOption);