셀렉트 박스의 옵션 값과 텍스트 값 가져오기
셀렉트 박스를 다룰 때 간단하지만 자주 찾고 자주 까먹는 방법입니다.
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>
<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>
▼ 예제 화면
마무리
셀렉트 박스의 option 값 말고도 text값을 이용해서 다양하게 프로그램을 만드셔도 좋은 방법입니다.
물런 필요하다면요.
'IT_Developers > Javascript' 카테고리의 다른 글
| jQuery | Plugin - select 박스 검색 가능하게 (3) | 2017.11.02 |
|---|---|
| Javascript - 아이폰,안드로이드 기기 체크 (0) | 2017.11.02 |
| jQuery - 바코드(barcode) 만들기 (4) | 2017.09.04 |
| JavaScript - select readonly 적용 (0) | 2017.08.30 |
| Javascript - 자바스크립트 암호화, 압축하기 / packer (0) | 2017.08.30 |
댓글