HTML DOM의 option 객체는 HTML 문서 내 <option> 요소를 나타냅니다. <option> 요소는 주로 <select> 태그 안에서 드롭다운 목록의 개별 항목을 정의할 때 사용되며, JavaScript로 동적으로 생성하거나 제어할 수 있습니다.
option 객체 생성 방법
JavaScript에서 option 객체를 생성하는 기본 문법은 다음과 같습니다.
document.createElement("OPTION");createElement() 메서드를 호출하면 새로운 <option> 요소가 메모리에 생성되며, 이후 필요한 속성을 설정한 뒤 원하는 위치에 추가하면 됩니다.
option 객체의 주요 속성
option 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| disabled | 해당 옵션이 비활성화 상태인지 여부를 반환하며, 값을 수정하여 활성화/비활성화를 설정할 수 있습니다. |
| defaultSelected | HTML 문서에서 해당 옵션의 기본 선택(default) 여부를 반환합니다. |
| form | 해당 옵션을 포함하고 있는 폼(form) 요소에 대한 참조를 반환합니다. |
| index | 옵션이 드롭다운 목록 내에서 차지하는 인덱스 위치를 반환하고 수정할 수 있습니다. |
| label | 옵션의 label 속성 값을 반환하고 변경할 수 있습니다. |
| selected | 현재 옵션이 선택된 상태인지 여부를 반환하고 변경할 수 있습니다. |
| text | 옵션에 표시되는 텍스트 내용을 반환하고 수정할 수 있습니다. |
| value | 서버로 전송될 옵션의 값을 반환하고 수정할 수 있습니다. |
실전 예제
버튼을 클릭하면 새로운 option 객체를 생성하여 드롭다운 목록에 추가하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:#fff;
color:#0197F6;
}
h1{
color:#23CE6B;
}
.btn{
background-color:#fff;
border:1.5px dashed #0197F6;
height:2rem;
border-radius:2px;
width:60%;
margin:2rem auto;
display:block;
color:#0197F6;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM option 객체 데모</h1>
<select class="drop-down"></select>
<button onclick="createDropDownList()" class="btn">드롭다운 옵션 만들기</button>
<script>
function createDropDownList() {
var option = document.createElement("option");
option.setAttribute("value","Hello");
option.innerText='Hello';
document.querySelector(".drop-down").appendChild(option);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다.
“드롭다운 옵션 만들기” 버튼을 클릭하면 createDropDownList() 함수가 실행되어 새로운 option 객체가 생성되고, appendChild()를 통해 드롭다운 목록에 항목이 추가됩니다.
이처럼 option 객체를 활용하면 사용자 입력에 따라 드롭다운 목록을 실시간으로 구성하는 등 동적인 UI를 손쉽게 구현할 수 있습니다.