HTML DOM select value 속성 완벽 정리 – 드롭다운 값 가져오기와 변경하기

HTML DOM의 select 객체 value 속성은 웹 페이지의 드롭다운 목록(drop-down list)에서 현재 선택된 옵션의 값을 반환하거나, 원하는 값으로 변경할 수 있게 해주는 속성입니다. 이 속성을 활용하면 자바스크립트만으로 사용자가 선택한 항목을 손쉽게 확인하고 제어할 수 있습니다.

문법(Syntax)

1. 값 반환하기

object.value

2. 값 설정(수정)하기

object.value = 새로운 값

value 속성을 읽으면 현재 선택된 옵션의 value 속성값이 반환되며, 만약 옵션에 value 속성이 지정되어 있지 않다면 해당 옵션의 텍스트 내용이 대신 반환됩니다. 반대로 값을 설정하면 일치하는 value를 가진 옵션이 자동으로 선택 상태로 변경됩니다.

예제(Example)

다음은 HTML DOM select 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.1rem;
    }
    .drop-down{
        width:35%;
        border:2px solid #fff;
        font-weight:bold;
        padding:8px;
        outline:none;
    }
    .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;
        color:#db133a;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Select value 속성 데모</h1>
<p>안녕하세요! 좋아하는 과목을 선택해 보세요:</p>
<select class='drop-down' name="Drop Down List">
<option>물리학</option>
<option>수학</option>
<option>화학</option>
<option>영어</option>
</select>
<button type="button" onclick="getValue()" class="btn">값 보기</button>
<div class="show"></div>
<script>
    function getValue() {
        var dropDown = document.querySelector(".drop-down");
        document.querySelector(".show").innerHTML = "Value = " + dropDown.value;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

HTML DOM select value 속성 완벽 정리 – 드롭다운 값 가져오기와 변경하기

드롭다운 목록에서 과목을 선택한 후 “값 보기” 버튼을 클릭하면, 아래 그림처럼 선택된 값이 화면에 표시됩니다.

HTML DOM select value 속성 완벽 정리 – 드롭다운 값 가져오기와 변경하기

정리

select 요소의 value 속성은 드롭다운 목록과 자바스크립트를 연결하는 핵심 기능입니다. 폼 유효성 검사, 필터링, 동적 UI 구성 등 다양한 상황에서 사용자의 선택값을 읽거나 프로그래밍 방식으로 변경할 때 유용하게 활용할 수 있습니다.