웹 개발을 하다 보면 사용자가 <select> 드롭다운에서 선택한 값이 특정 배열에 포함되어 있는지 확인해야 하는 경우가 자주 있습니다. 이번 글에서는 jQuery의 change 이벤트와 $.inArray() 메서드를 활용해 선택된 값이 배열에 존재하는지 판별하고, 그 결과를 브라우저 콘솔에 출력하는 방법을 알아보겠습니다.
예제용 드롭다운 준비하기
먼저 다음과 같은 드롭다운 목록이 있다고 가정해 보겠습니다.
<select> <option>John</option> <option>David</option> <option>Chris</option> <option>Mike</option> <option>Bob</option> <option>Carol</option> </select>
그리고 비교 대상이 될 이름 배열은 다음과 같습니다.
var listOfNames = ["Chris", "Robert", "Mike"];
핵심 로직: change 이벤트와 $.inArray()
사용자가 드롭다운에서 값을 선택할 때마다 확인 작업을 수행하려면 change 이벤트를 바인딩해야 합니다.
$('select').on('change', function() { ... });이벤트 핸들러 내부에서는 $.inArray()를 사용해 선택된 값이 배열에 포함되어 있는지 검사합니다. 이 메서드는 값이 배열에 존재하면 해당 인덱스(0 이상)를 반환하고, 존재하지 않으면 -1을 반환하기 때문에 반환값이 -1보다 큰지 여부로 포함 여부를 판단할 수 있습니다.
전체 예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<select>
<option>John</option>
<option>David</option>
<option>Chris</option>
<option>Mike</option>
<option>Bob</option>
<option>Carol</option>
</select>
<script>
var listOfNames = ["Chris", "Robert", "Mike"];
$('select').on('change', function() {
var name = this.value.split(' ')[0];
if($.inArray(name, listOfNames) > -1) {
console.log('This is present in list of name array');
} else {
console.log('This is not present in list of name array');
}
});
</script>
</body>
</html>프로그램 실행 방법
위 코드를 실행하려면 파일 이름을 "anyName.html(index.html)"로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 됩니다. Live Server 확장 프로그램이 설치되어 있지 않다면, HTML 파일을 브라우저에서 직접 열어도 동일하게 테스트할 수 있습니다.
실행 결과 확인
프로그램을 실행하면 화면에 드롭다운 목록이 나타납니다.
이제 드롭다운에서 값을 하나 선택해 보세요. 만약 선택한 값이 배열 listOfNames에 포함되어 있다면(예: Chris 또는 Mike), 콘솔에 다음과 같은 메시지가 출력됩니다.
This is present in list of name array
반대로 배열에 없는 값(예: John, David, Bob, Carol)을 선택하면 아래와 같은 메시지가 표시됩니다.
This is not present in list of name array
추가 팁: 순수 JavaScript로 구현하기
jQuery를 사용하지 않고 순수 JavaScript만으로도 같은 기능을 구현할 수 있습니다. ES6부터 제공되는 Array.prototype.includes() 메서드를 활용하면 코드가 더욱 간결해집니다.
document.querySelector('select').addEventListener('change', function() {
const listOfNames = ["Chris", "Robert", "Mike"];
if(listOfNames.includes(this.value)) {
console.log('배열에 포함된 이름입니다.');
} else {
console.log('배열에 포함되지 않은 이름입니다.');
}
});includes()는 포함 여부를 불리언 값으로 바로 반환하므로, 인덱스 기반으로 비교하는 $.inArray()보다 직관적이라는 장점이 있습니다. 프로젝트에서 이미 jQuery를 사용 중이라면 $.inArray(), 그렇지 않다면 includes()를 사용하는 것을 추천합니다.