Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 드롭다운(select) 옵션 개수 구하기

JavaScript에서 드롭다운(select) 요소에 포함된 옵션(option)의 개수를 확인해야 하는 경우가 종종 있습니다. 예를 들어, 아래와 같은 드롭다운이 있다고 가정해 보겠습니다.

<select id="lengthListOfOptionDemo">
    <option>John</option>
    <option>Mike</option>
    <option>Sam</option>
    <option>David</option>
    <option>Carol</option>
</select>

이 드롭다운에는 총 5개의 옵션이 포함되어 있습니다. 이처럼 select 요소 내부의 option 개수를 구하는 방법은 크게 두 가지가 있습니다. 하나는 순수 JavaScript의 .length 속성을 활용하는 방법이고, 다른 하나는 jQuery를 사용하는 방법입니다.

방법 1: jQuery를 사용하는 방법

jQuery를 사용하면 선택자(selector)로 option 요소들을 모두 선택한 뒤 .length 속성으로 개수를 손쉽게 얻을 수 있습니다. 다음은 전체 코드 예제입니다.

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
<body>
<select id="lengthListOfOptionDemo">
<option>John</option>
<option>Mike</option>
<option>Sam</option>
<option>David</option>
<option>Carol</option>
</select>
<script>
    var lengthOfListOptions = $("#lengthListOfOptionDemo option").length;
    console.log("옵션 개수 = " + lengthOfListOptions);
</script>
</body>
</html>

위 코드의 핵심 부분은 다음 한 줄입니다.

var lengthOfListOptions = $("#lengthListOfOptionDemo option").length;

ID가 lengthListOfOptionDemo인 select 요소 하위에 있는 모든 option 요소를 선택하고, 그 개수를 변수에 저장한 후 콘솔에 출력합니다.

방법 2: 순수 JavaScript를 사용하는 방법

jQuery 없이도 표준 DOM API만으로 동일한 결과를 얻을 수 있습니다.

var lengthOfListOptions = document.getElementById("lengthListOfOptionDemo").options.length;
console.log("옵션 개수 = " + lengthOfListOptions);

HTMLSelectElement 객체는 자체적으로 options 컬렉션과 length 속성을 제공하므로, 별도의 라이브러리 없이 간단하게 옵션 개수를 확인할 수 있습니다.

프로그램 실행 방법

위 코드를 실행하려면 파일 이름을 “anyName.html(index.html)”로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭합니다. 그다음 “Open with Live Server” 옵션을 선택하면 브라우저에서 프로그램이 실행됩니다.

실행 결과

프로그램을 실행하면 콘솔(Console) 탭에 다음과 같은 결과가 출력됩니다.

옵션 개수 = 5

드롭다운에 정의된 John, Mike, Sam, David, Carol 등 총 5개의 옵션 개수가 정상적으로 출력되는 것을 확인할 수 있습니다.