● 콤보박스 다루기
select 태그로 만드는 콤보박스는 여러 항목에서 하나를 선택하는 형태의 폼 요소입니다. 체크박스나 라디오버튼에서 checked 속성으로 선택 항목을 확인할 수 있는 것처럼 콤보박스에서는 selected 속성으로 선택 항목을 확인할 수 있습니다.
12/05/select.html
<form>
<select>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="orange">오렌지</option>
<option value="melon">멜론</option>
</select>
</form>
예제 코드를 웹 브라우저로 실행한 뒤 원하는 항목을 선택합니다. 그리고 다음 코드를 콘솔창에 입력하면 현재 선택된 콤보박스의 value 속성값을 결과로 가져옵니다.
const optionEls = document.querySelectorAll("option");
for(let i = 0; i < optionEls.length; i++){
if(optionEls[i].selected === true){
console.log(optionEls[i].value);
}
}