JavaScript 활용팁
2018.11.24 / 11:32
[JavaScript] Select 태그의 값을 순서, Index로 찾기, selectedIndex
hanulbit
추천 수 175
select 태그에서 선택된 값이 있는 경우 몇번째 해당하는지 값을 알려면 어떻게 알 수 있을까요? 아래 방법은 선택된 값을 얻는 자바스크립트 방법입니다.
# selectedIndex를 사용한 select 태그의 선택값 알아내기
select 태그에서 선택된 값의 위치 또는 순서 index를 알려면 selectedIndex 속성을 사용합니다. 이 속성은 선택된 태그의 index 넘버를 반환해줍니다. 간단한 사용 방법은 아래와 같이 사용합니다!
selectElement.selectedIndex;
참고로 선택된 <option> 태그에 적용된 값을 알려면 element.value 프로퍼티를 사용하여 그 값을 알 수 있죠. 하지만 index 값인 순서를 알아야한다면 selectedIndex를 사용합니다. 간단하게 선택된 값의 해당위치를(순서값) 불러옵니다. 그럼 아래 예제를 참고하세요.
# select 태그의 selectedIndex 예제보기
아래 select 태그가 값을 가지는 경우 이 값의 index, 위치를 얻는 예제입니다.@ selectedIndex.html
<select class="selectTest">
<option name="test1" selected="selected">Test1</option>
<option name="test2">Test2</option>
<option name="test3">Test3</option>
</select>
<option name="test1" selected="selected">Test1</option>
<option name="test2">Test2</option>
<option name="test3">Test3</option>
</select>
이제 아래와 같이 스크립트를 사용하여 확인해봅시다.
var test = document.getElementsByClassName("selectTest");
// test 변수에 selectTest란 클래스명을 가진 요소를 저장
var indexNo = test[0].selectedIndex;
// test 변수의 선택된 값을 indexNo에 저장
console.log(indexNo);
// test 변수에 selectTest란 클래스명을 가진 요소를 저장
var indexNo = test[0].selectedIndex;
// test 변수의 선택된 값을 indexNo에 저장
console.log(indexNo);
위 스크립트를 실행하면 indexNo의 반환값으로 아래와 같이 콘솔에 출력됩니다.
0 // 제일 앞에 있으므로 0을 반환함
참고로, 스크립트를 실행시키면 맨 위부터 (0, 1, 2, ...) 순서로 값을 가져옵니다. 시작값이 0부터 증가하게됩니다.
! 예제 동작해보기길제로 아래의 select 태그에서 값을 선택해보세요! 해당 index값을 출력하게됩니다.
#inde