JavaScript를 사용해 <select> 목록 항목을 미리 선택(preselect)하려면 selectedIndex 속성을 활용하면 됩니다. 이 속성에 미리 선택하고 싶은 항목의 인덱스 번호를 지정하기만 하면 됩니다.
selectedIndex 속성의 기본 문법
<script> 태그 안에서 add_select_id는 <select> 태그의 id 값이고, add_item_index는 숫자 형태의 인덱스입니다. 이 인덱스는 목록 항목의 순서 번호로, 미리 선택하려는 항목에 해당하는 번호를 지정해 주면 됩니다.
document.getElementById("add_select_id").selectedIndex = add_item_index;인덱스는 0부터 시작한다는 점에 유의하세요. 즉, 첫 번째 항목은 0, 두 번째 항목은 1, 세 번째 항목은 2에 해당합니다.
예제
다음 코드를 실행하면 JavaScript로 목록 항목을 미리 선택한 결과를 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Preselect List Item</title>
</head>
<body>
<p> Select any one:</p>
<form>
<select id="dropdown" name="dropdown" class="form-control">
<option value = "Java">Java</option>
<option value = "Discrete Mathematics">Discrete Mathematics</option>
<option value = "Digital Electronics">Digital Electronics</option>
</select>
</form>
<script>
document.getElementById("dropdown").selectedIndex = "2";
</script>
</body>
</html>위 예제에서는 selectedIndex를 "2"로 설정했기 때문에, 페이지가 로드되는 순간 세 번째 옵션인 "Digital Electronics"가 자동으로 선택된 상태로 표시됩니다. 이처럼 selectedIndex 속성을 활용하면 별도의 사용자 조작 없이도 드롭다운 목록의 기본 선택값을 손쉽게 제어할 수 있습니다.