본문 바로가기
IT_Developers/Javascript

JavaScript - select 박스의 option value, text 가져오기

by 고코더 2017. 8. 31.


셀렉트 박스의 옵션 값과 텍스트 값 가져오기


셀렉트 박스를 다룰 때 간단하지만 자주 찾고 자주 까먹는 방법입니다.

options[target.selectedIndex].text  : 셀렉트 박스 옵션 사이에 있는 텍스트 값을 가져온다
options[target.selectedIndex].value : 셀렉트 박스 value 의 값을 가져온다.




▼ 아래처럼 하면은 셀렉트박스의 text 값과 value 값을 가져오는 방법이 됩니다.
<html>
<
body>
<
select name="selectBox" id="selectBox">
    <
option value="" selected>A</option>
    <
option value="">B</option>
    <
option value="">C</option>
</
select>
</
body>

<
script type="text/javascript">
   
var target = document.getElementById("selectBox");
    alert
('선택된 옵션 text =' + target.options[target.selectedIndex].text);     // 옵션 text
       
alert('선택된 옵션 value =' + target.options[target.selectedIndex].value);     // 옵션 value

</script>

</html>

▼ 예제 화면 





+고코더의 추천 강의


▼ select박스도 검색되게 해보세요!

-> http://gocoder.tistory.com/67?category=708022






마무리


셀렉트 박스의 option 값 말고도 text값을 이용해서 다양하게 프로그램을 만드셔도 좋은 방법입니다.

물런 필요하다면요.






















댓글