목차
selectedIndex 예제 - 선택된 색인번호
selectedIndex 정의
selectedIndex 구문
selectedIndex 예제 - 옵션 미지정 시, 첫 번째 옵션 자동 지정
selectedIndex 예제 - 선택된 색인번호
<select id="hz">
<option>HTML</option>
<option>CSS</option>
<option>JS</option>
<option>JQEURY</option>
</select>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").selectedIndex = "2"; // 색인은 0부터 시작.
}
</script>
결과보기
selectedIndex 정의
드롭 다운 목록에서 선택한 옵션의 인덱스 설정/반환.
1.
인덱스는 0부터 시작.
2.
여러 항목 선택 가능 시, 선택한 첫 번째 옵션의 인덱스만 반환.
"-1"값은 모든 옵션 (있는 경우)을 선택 취소.
옵션 선택 안 하면 selectedIndex 속성은 -1 반환.
3.
모든 브라우저 지원.
selectedIndex 구문
반환
selectObject .selectedIndex
설정
selectObject .selectedIndex = number
[속성값]
number
선택된 옵션의 인덱스 숫자 지정.
[반환값]
드롭다운 리스트에서 선택된 옵션의 인덱스 숫자 반환.
옵션 인덱스는 0부터 시작.
선택된 옵션 없는 경우, -1 반환.
selectedIndex 예제 - 옵션 미지정 시, 첫 번째 옵션 자동 지정
<select id="hz">
<option>HTML</option>
<option>CSS</option>
<option>JS</option>
<option>JQUERY</option>
</select>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var num = document.getElementById("hz").selectedIndex;
var arr = document.getElementById("hz").options;
alert("Index " + arr[num].index + " : " + arr[num].text);
}
</script>
결과보기 (결과값: Index 0 : HTML)
주소 복사
랜덤 이동