[HTML] select, option 태그 주요 속성과 특징

Option 생성자 함수 | MDN

---

💡 HTML 옵션 태그의 selected 어트리뷰트와 자바스크립트로 접근하는 option.selected 속성(프로퍼티)은 서로 독립적인 기능을 가진다. 옵션 태그의 selected 어트리뷰트는 초기 선택 상태를 나타내고, option.selected 속성은 현재 선택 상태를 반영하고 제어하는데 사용한다.

// Option 생성자를 사용하면 document.createElement() 보다 더 간결하게 작성할 수 있다
new Option(text?, value?, defaultSelected?, selected?)

 

◼︎ text : 옵션 요소에 표시할 텍스트 | 기본값 "" 빈 문자열
text에 지정한 값은 option.textContent로 설정된다.

◼︎ value : 옵션 요소의 value 속성 | 생략시 text 값 사용
셀렉트 박스에서 옵션을 선택하면 해당 옵션의 value 값이 select.value에 저장된다.

◼︎ defaultSelected : 초기 선택 상태를 나타내는 boolean | 기본값 false
true 지정 시 옵션 태그에 selected 어트리뷰트가 추가된다. 하지만 selected (4번째)인자를 생략하면 셀렉트 박스에선 옵션을 선택하지 않은 상태로 표시하고 select.value 속성에도 반영되지 않는다. 즉, 옵션 태그의 selected 어트리뷰트는 defaultSelected 값을 true로 지정했을 때만 추가된다.

만약 option.defaultSelected 값을 true로 직접 할당하면 셀렉트 박스는 옵션을 선택한 상태가 되고, option.selected 속성도 true로 변경된다. option.selected 속성이 true로 변경됐으므로 select.value 에도 반영된다. 이처럼 직접 할당은 Option 생성자 작동 방식과 살짝 다르므로 주의하자. 

어떠한 옵션도 선택되지 않았다면 처음 로드시 브라우저가 첫 번째 옵션을 기본적으로 선택한다. 이때 옵션 요소의 defaultSelected 속성엔 영향을 주지 않고, selected 속성만 true가 된다.

◼︎ selected : 현재 선택 상태를 나타내는 boolean | 기본값 false
true 지정시 셀렉트 박스에서 해당 옵션을 선택한 상태로 표시하고 option.selected 속성은 true 값을 가진다. option.selected 속성 값이 true여도(셀렉트 박스에서 옵션을 선택한 상태) HTML 옵션 태그에는 selected 어트리뷰트가 추가되지 않다.

 

 

<select> 주요 속성 | MDN

---

💡 옵션 요소를 동적으로 추가할 땐 select.add(option|optiongroup) 메서드를 사용한다 | MDN

 

◼︎ name : 셀렉트 박스(드롭다운 목록)의 이름

폼 제출시 서버에서 해당 데이터를 식별하기 위한 이름. 자바스크립트로 요소를 참조할 때도 사용된다.

 

◼︎ options : 옵션 목록 HTMLCollection (유사배열)

 

◼︎ value : 현재 선택한 옵션의 value

 

◼︎ selectedIndex : 현재 선택한 옵션의 인덱스 | 선택한 옵션 없으면 -1 반환

 

◼︎ selectedOptions : 현재 선택한 옵션 요소들이 포함된 HTMLCollection

multiple 속성을 통해 여러 옵션을 선택할 수 있으므로 목록 형태로 반환하는 것

 

◼︎ multiple : 여러 옵션을 선택할 수 있도록 할지 여부 | 기본값 false

true 지정시 ⌘(윈도우는 Ctrl) + Click으로 여러 옵션 선택 가능

 

◼︎ size : 셀렉트 박스에 몇 개의 옵션을 표시할지 지정 | 기본값 0

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요