[HTML] select, option 요소의 주요 속성과 특징

Option() 생성자 함수 | MDN

---

🔍 <option> 요소의 selected 어트리뷰트와 자바스크립트로 접근하는 option.selected 프로퍼티는 서로 독립적인 기능을 가진다. <option> 요소의 selected 어트리뷰트는 초기 선택 상태를 나타내고, option.selected 프로퍼티는 현재 선택 상태를 반영하고 제어하는 데 사용한다.

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

 

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

② value : <option> 요소의 value 프로퍼티 | 생략 시 text 값 사용

옵션을 선택하면 option.value 값이 select.value로 지정된다.

③ defaultSelected : 초기 선택 상태를 나타내는 불리언 | 기본값 false
true 지정 시 옵션 요소에 selected 어트리뷰트가 추가된다. 정적 HTML이나 페이지를 처음 렌더링할 때 selected 어트리뷰트가 있으면 셀렉트 박스는 해당 옵션을 선택하고 select.value 프로퍼티에 반영한다.

 

하지만 페이지 로드 후 동적으로 추가한 옵션 요소는 selected 어트리뷰트가 있어도 선택 상태에는 영향을 주지 않는다. 즉, 옵션 요소의 selected 어트리뷰트는 셀렉트 박스 선택과 관계없이 초기 상태만 나타낸다. 옵션을 선택한 상태로 만들려면 Option() 생성자 4번째 인자인 selected 값을 true로 지정해야 한다.

 

어떠한 옵션도 선택하지 않았다면 첫 로드 시 브라우저가 첫 번째 옵션을 자동으로 선택한다. 이때 selected 어트리뷰트는 추가되지 않고, option.defaultSelected 프로퍼티 값에도 영향을 주지 않는다. 대신 option.selected 프로퍼티 값은 true가 된다.

 

④ selected : 현재 선택 상태를 나타내는 불리언 | 기본값 false
true 지정 시 해당 옵션이 선택되고 option.selected 프로퍼티는 true 값을 가진다. option.selected 프로퍼티 값이 true여도(셀렉트 박스에서 옵션을 선택한 상태) 초기 상태를 나타내는 selected 어트리뷰트는 추가되지 않는다.

 

 

<select> 주요 속성 | MDN

---

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

 

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

폼 제출시 서버에서 해당 데이터를 식별하기 위한 이름.

name 속성이 없으면 폼을 제출해도 셀렉트 박스 값이 서버로 전송되지 않는다.

자바스크립트로 요소를 참조할 때도 사용할 수 있다. 예) document.forms.myForm.selectName

 

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

 

③ multiple : 여러 옵션 선택 가능 여부 | 기본값 false
true 지정 시 Cmd(Ctrl) + Click으로 여러 옵션을 선택할 수 있다.
true 지정 시 size 값과 무관하게 항상 목록(리스트 박스) 형태로 표시.

 

④ value : 현재 선택한 옵션의 value

multiple 속성이 true일 때 여러 옵션을 선택했더라도 첫 번째로 선택한 옵션의 값만 반환.

 

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

multiple 속성이 true일 때는 첫 번째로 선택한 옵션의 인덱스만 반환.

 

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

multiple 속성을 통해 여러 옵션을 선택할 수 있기 때문에 항상 목록 형태로 반환.

 

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

드롭다운 형태로 표시: size 속성이 1 이하이고, multiple 속성이 false 일 때.

리스트 박스 형태로 표시(항상 펼침): size 속성이 2 이상이거나, multiple 속성이 true 일 때.