HTML DOM select multiple 속성 – 드롭다운에서 다중 선택 구현하기

HTML DOM의 multiple 속성은 <select> 요소로 만든 드롭다운 목록에서 여러 개의 옵션을 동시에 선택할 수 있는지 여부를 확인하거나 변경할 때 사용합니다. 이 속성을 true로 설정하면 사용자가 Ctrl(Windows) 또는 Cmd(Mac), Shift 키를 누른 상태로 여러 항목을 한 번에 선택할 수 있습니다.

문법(Syntax)

multiple 속성의 기본 문법은 다음과 같습니다.

1) 현재 값 가져오기

object.multiple

2) 다중 선택 허용 여부 설정하기

object.multiple = true | false

true : 드롭다운 목록에서 여러 옵션을 동시에 선택할 수 있습니다.
false : 한 번에 하나의 옵션만 선택할 수 있습니다(기본값).

예제

아래 예제는 버튼을 클릭하면 자바스크립트로 multiple 속성을 true로 바꾸어, 드롭다운 목록에서 다중 선택이 가능하도록 만드는 코드입니다.

<!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:50%;
        border:2px solid #fff;
        font-weight:bold;
        padding:8px;
        background-color:#ffffff24;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:45%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.1rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Select multiple 속성 데모</h1>
<p>가장 좋아하는 과목을 선택하세요:</p>
<select class='drop-down'>
<option>물리학</option>
<option>수학</option>
<option>화학</option>
<option>영어</option>
</select>
<button onclick="multiple()" class="btn">다중 선택 활성화</button>
<div class="show"></div>
<script>
    function multiple() {
        var dropDown = document.querySelector(".drop-down");
        var showMsg = document.querySelector(".show");
        dropDown.multiple = true;
        showMsg.innerHTML = "이제 Ctrl/Shift 키를 누른 상태에서 여러 옵션을 선택할 수 있습니다";
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM select multiple 속성 – 드롭다운에서 다중 선택 구현하기

이제 “다중 선택 활성화” 버튼을 클릭해 보세요. 버튼을 누르는 순간 multiple 속성이 true로 설정되어, Ctrl 또는 Shift 키를 누른 상태로 드롭다운 목록의 여러 옵션을 동시에 선택할 수 있게 됩니다.

HTML DOM select multiple 속성 – 드롭다운에서 다중 선택 구현하기

정리

select 요소의 multiple 속성은 자바스크립트에서 언제든 동적으로 읽고 쓸 수 있습니다. 설문조사, 태그 선택, 관심 분야 선택처럼 사용자가 여러 값을 고르게 해야 하는 폼을 만들 때 유용하게 활용할 수 있습니다.