JavaScript로 드롭다운 목록의 옵션 개수 구하는 방법

드롭다운 목록(<select>)에 포함된 옵션의 개수를 구하려면 JavaScript의 length 속성을 사용하면 됩니다. <select> 요소 객체의 length 속성은 해당 목록 안에 포함된 <option> 요소의 총 개수를 숫자 값으로 반환합니다.

예제

아래 코드를 실행하면 드롭다운 목록의 옵션 수가 화면에 출력됩니다.

<!DOCTYPE html>
<html>
   <body>
      <form id="myForm">
         <select id="mySelect">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
         </select>
      </form>
      <script>
         var val = document.getElementById("mySelect").length;
         document.write("<br>Options in the DropDown list: "+val);
      </script>
   </body>
</html>

코드 설명

document.getElementById("mySelect"): id가 mySelect인 드롭다운(<select>) 요소를 가져옵니다.
.length: 해당 select 요소 내부의 <option> 개수를 반환합니다. 위 예제에서는 결과값으로 3이 출력됩니다.

참고 사항

위 예제에서 사용한 document.write()는 현재 표준에서 권장하지 않는(deprecated) 방식입니다. 실무 환경에서는 아래와 같이 DOM을 직접 조작하여 결과를 출력하는 것이 좋습니다.

var val = document.getElementById("mySelect").length;
document.getElementById("result").textContent = "드롭다운 옵션 개수: " + val;

또한 document.querySelectorAll("#mySelect option").length처럼 querySelectorAll을 활용해도 동일하게 옵션 개수를 얻을 수 있습니다.