드롭다운 목록(선택 목록)에서 여러 옵션을 선택하려면 multiple 속성을 사용합니다. 이 속성이 설정되면 사용자는 Ctrl 키를 누른 상태에서 클릭하여 두 개 이상의 옵션을 동시에 선택할 수 있습니다.
기본 예제
아래 코드를 실행하면 버튼 클릭 시 자바스크립트로 select 요소에 multiple 속성을 동적으로 추가하고, 여러 옵션을 한 번에 선택하는 방법을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<select id="mySelect">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Press CTRL and click above button to select multiple options at once.</p>
<script>
function multipleFunc() {
document.getElementById("mySelect").multiple = true;
}
</script>
</body>
</html>동작 방식 설명
위 예제에서 핵심은 다음 한 줄입니다.
document.getElementById("mySelect").multiple = true;버튼을 클릭하면 multipleFunc() 함수가 실행되어 id가 mySelect인 select 요소의 multiple 속성이 true로 변경됩니다. 그 결과 해당 드롭다운 목록은 다중 선택 모드로 전환됩니다.
HTML에서 직접 다중 선택 설정하기
자바스크립트 없이 처음부터 다중 선택을 허용하려면 HTML 태그에 multiple 속성을 직접 작성하면 됩니다. 또한 size 속성을 함께 사용하면 여러 옵션이 화면에 동시에 표시되어 사용자가 더 편리하게 선택할 수 있습니다.
<select id="mySelect" multiple size="3"> <option>One</option> <option>Two</option> <option>Three</option> </select>
참고 사항
- macOS 환경에서는 Ctrl 대신 Command(⌘) 키를 누른 상태에서 클릭해야 여러 옵션을 선택할 수 있습니다.
- 연속된 여러 옵션을 한꺼번에 선택하려면 첫 번째 옵션을 클릭한 후 Shift 키를 누른 상태에서 마지막 옵션을 클릭합니다.
- 다중 선택 모드에서는
select.value가 마지막으로 선택된 값만 반환하므로, 선택된 모든 값을 가져오려면selectedOptions컬렉션을 사용하는 것이 좋습니다.