소개
1개 이상의 SELECT 태그를 사용할 때 특정 옵션 값에 따라 다른 SELECT 태그를 비활성화하거나 활성화해야 하는 경우가 있습니다. 이번 포스팅에서는 간단한 JavaScript를 사용해 select1의 값에 따라 select2를 활성화하거나 비활성화하는 방법을 알아보겠습니다.
방법 1. addEventListener 사용(기본 HTML 구조)
아래는 두 개의 SELECT 태그를 사용한 기본 HTML입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select 동적 비활성화</title>
</head>
<body>
<h1>JavaScript로 Select 활성화/비활성화 제어</h1>
<label for="select1">Select 1:</label>
<select id="select1">
<option value="">-- 선택 --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label for="select2">Select 2:</label>
<select id="select2">
<option value="">-- 선택 --</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
<script src="script.js"></script>
</body>
</html>
JavaScript 코드
select1의 value 값에 따라 select2를 동적으로 활성화하거나 비활성화하는 JavaScript 코드입니다.
// Select 태그 DOM 가져오기
const select1 = document.getElementById("select1");
const select2 = document.getElementById("select2");
// Select 1의 값에 따라 Select 2 활성화/비활성화
select1.addEventListener("change", () => {
const value = select1.value;
if (value === "2") {
// select1의 값이 2일 경우 select2 비활성화
select2.disabled = true;
} else {
// select1의 값이 2가 아닐 경우 select2 활성화
select2.disabled = false;
}
});
작동 원리
select1의 change 이벤트를 감지합니다.
select1.value 값을 확인하여:
value가 "2"인 경우: select2 태그를 비활성화(disabled) 상태로 변경합니다.
value가 "2"가 아닌 경우: select2 태그를 활성화(enabled) 상태로 변경합니다.
결과
Select 1에서 "Option 2"를 선택하면, Select 2는 비활성화됩니다.
다른 옵션(Option 1, Option 3)을 선택하면, Select 2는 다시 활성화됩니다.
방법 2. onchage 사용(기본 HTML 구조)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select 동적 비활성화</title>
<script>
// Select 값에 따라 동작을 제어하는 함수
function toggleSelect2(select1) {
const select2 = document.getElementById("select2");
// select1의 값이 "2"일 경우 select2 비활성화, 그렇지 않으면 활성화
if (select1.value === "2") {
select2.disabled = true;
} else {
select2.disabled = false;
}
}
</script>
</head>
<body>
<h1>JavaScript로 Select 활성화/비활성화 제어</h1>
<label for="select1">Select 1:</label>
<!-- onchange 속성으로 함수 호출 -->
<select id="select1" onchange="toggleSelect2(this)">
<option value="">-- 선택 --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label for="select2">Select 2:</label>
<select id="select2">
<option value="">-- 선택 --</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</body>
</html>
작동 원리
onchange 속성 사용:
select1 태그의 onchange 속성에 toggleSelect2 함수를 연결합니다.
선택 값이 변경될 때마다 함수가 호출됩니다.
파라미터로 값 전달:
toggleSelect2(this)에서 this는 이벤트가 발생한 select1 요소를 참조합니다.
함수 내부에서 select1.value 값을 사용해 조건을 처리합니다.
비활성화 처리:
select1.value === "2"인 경우 select2.disabled = true로 비활성화.
그렇지 않으면 select2.disabled = false로 활성화.