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

JavaScript로 드롭다운 항목을 미리 선택하는 방법

JavaScript를 사용해 드롭다운 목록에서 특정 항목을 미리 선택(preselect)하려면 selectedIndex 속성을 활용하면 됩니다. 미리 선택하고 싶은 항목의 인덱스 번호만 지정해 주면 간단하게 구현할 수 있습니다.

드롭다운 목록은 HTML에서 <select> 태그를 사용해 생성하며, JavaScript 코드는 <script> 태그 안에 작성합니다. 여기서 add_select_id는 <select> 태그의 id 값을 의미하고, add_item_index는 숫자로 표현된 인덱스입니다. 이 인덱스는 목록 항목의 순번으로, 참고로 인덱스는 0부터 시작합니다. 따라서 두 번째 항목을 미리 선택하려면 인덱스 값으로 1을 지정하면 됩니다.

JavaScript로 드롭다운 항목을 미리 선택하는 방법

예제

아래 코드를 실행하면 JavaScript를 통해 드롭다운 항목을 프로그래밍 방식으로 미리 선택할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML select tag</title>
   </head>
   <body>
      <p> Select any one:</p>
      <form>
         <select id="dropdown" name="dropdown" class="form-control">
            <option value = "Android">Android</option>
            <option value = "CSS">CSS</option>
            <option value = "Python">Python</option>
         </select>
      </form>
      <script>
         document.getElementById("dropdown").selectedIndex = "1";
      </script>
   </body>
</html>

위 예제에서는 세 개의 옵션(Android, CSS, Python)이 있는 드롭다운을 만들고, selectedIndex를 1로 설정하여 페이지가 로드될 때 두 번째 항목인 'CSS'가 자동으로 선택되도록 했습니다. 이처럼 selectedIndex 속성을 활용하면 별도의 사용자 조작 없이도 원하는 기본값을 손쉽게 설정할 수 있습니다.