HTML DOM의 option value 속성은 드롭다운 목록(<select>) 안에 있는 옵션의 값을 가져오거나 수정할 때 사용됩니다. 여기서 말하는 '값'이란 폼이 제출될 때 서버로 전송되는 실제 데이터를 의미하며, 화면에 보이는 텍스트(레이블)와는 별개로 관리됩니다.
문법(Syntax)
option value 속성의 기본적인 사용 문법은 다음과 같습니다.
값 반환하기
object.value
값 수정하기
object.value = "text"
예제
아래는 HTML DOM option value 속성을 활용한 실전 예제입니다. 드롭다운 목록에서 좋아하는 과목을 선택한 후 버튼을 클릭하면, 해당 옵션의 value 속성 값이 화면에 출력됩니다.
<!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 value Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down'>
<option value="Physics">Physics</option>
<option value="Maths">Maths</option>
<option value="Chemistry">Chemistry</option>
<option value="English">English</option>
</select>
<button onclick="showValue()" class="btn">Show Value</button>
<div class="show"></div>
<script>
function showValue() {
var dropDown = document.querySelector(".drop-down");
var msg = document.querySelector(".show").innerHTML="The selected value is: " + dropDown.options[dropDown.selectedIndex].value;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
드롭다운 목록에서 원하는 과목을 선택한 뒤 Show Value 버튼을 클릭해 보세요. 그러면 선택된 옵션의 value 속성 값이 아래와 같이 화면에 표시됩니다.
정리
option value 속성은 자바스크립트만으로도 간단하게 읽고 쓸 수 있어, 동적으로 드롭다운 값을 변경하거나 서버 전송 전에 값을 조작해야 하는 상황에서 매우 유용합니다. 특히 selectedIndex와 함께 사용하면 현재 선택된 옵션의 값을 즉시 확인할 수 있다는 점을 기억해 두세요.