HTML DOM의 defaultSelected 속성은 HTML 문서 내 option 요소가 처음 작성될 때 selected 속성으로 지정되어 있었는지 여부를 불리언(Boolean) 값으로 반환합니다.
이 속성은 사용자가 드롭다운 목록에서 선택을 변경한 이후에도, 페이지 로드 시점에 기본값으로 설정되어 있던 옵션이 무엇이었는지 확인할 수 있게 해줍니다. 기본 선택 옵션이라면 true, 아니라면 false를 반환합니다.
구문(Syntax)
defaultSelected 속성의 기본 구문은 다음과 같습니다.
object.defaultSelected
예제(Example)
아래 예제를 통해 defaultSelected 속성의 동작 방식을 살펴보겠습니다. 드롭다운 목록에서 'Maths' 항목에 selected 속성이 미리 지정되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.2rem;
}
.drop-down{
width:35%;
border:2px solid #fff;
font-weight:bold;
padding:8px;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Option defaultSelected Demo</h1>
<p>안녕하세요! 좋아하는 과목을 선택해 주세요:</p>
<select class='drop-down'>
<option>Physics</option>
<option selected>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="showValue()" class="btn">defaultSelected 값 보기</button>
<div class="show"></div>
<script>
function showValue() {
var dropDown = document.querySelector(".drop-down");
var msg = document.querySelector(".show").innerHTML="defaultSelected 값은 " +
dropDown[dropDown.selectedIndex].defaultSelected;
}
</script>
</body>
</html>출력 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
파란색 버튼을 클릭하면 현재 드롭다운 목록에서 선택된 옵션의 defaultSelected 속성 값을 확인할 수 있습니다.
사용자가 다른 과목(예: Chemistry)을 선택한 후 버튼을 누르면, 해당 옵션에는 selected 속성이 없었기 때문에 false가 출력됩니다. 반면 'Maths'는 HTML 코드에서 기본 선택 옵션으로 지정되어 있으므로 true가 반환됩니다.
정리
defaultSelected 속성은 selected 속성처럼 옵션을 직접 변경하지 않고 읽기 전용으로 기본 선택 여부만 확인할 수 있다는 점이 특징입니다. 폼 초기화 기능을 구현하거나, 사용자가 선택을 변경하기 전의 원래 상태를 추적해야 할 때 유용하게 활용할 수 있습니다.