[JavaScript] select option text값 / value값 가져오기

select option 값과 text값 가져오기

select요소.options[select요소.selectedIndex].text
: 셀렉트 옵션 태그 사이에 입력되어있는 텍스트 값         
<option>값</option>       (셀렉트 박스 안에 입력된 값)

select요소.options[select요소.selectedIndex].value
: 셀렉트 option value의 값
<option value=값></option>   (옵션 태그 안에 주어진 value값)

 

코드 예시

HTML

			<select id='select_operator'>
				<option value='plus'>+</option>
				<option value='minus'>-</option>
				<option value='multi'>*</option>
				<option value='div'>/</option>
				<option value='mod'>%</option>
			</select>
		<button type='button' onclick='cal();'>=</button>

⇒ select박스의 id를 select_operator 로 주고 그 안에 option 태그로 연산자들을 적어주었음
*각 옵션의 value값으로 영어 이름을 넣어주었고, 박스에 보여질 값(태그 사이에 작성한 값)은 기호*
버튼을 누르면 콘솔창에 값이 보이게 이벤트에 함수를 연결해줌

script

	<script>
		function cal(){
			var operators = document.getElementById('select_operator');
			var operator = operators.options[operators.selectedIndex].text;
			var value = operators.options[operators.selectedIndex].value;
			
			console.log(operators);
			console.log('operator(text) : ' + operator);
			console.log('value : ' + value);
		}
	
	</script>

⇒ operators변수안에 select태그 요소를 넣어주고
operator변수에 select태그 요소의 options 중에 선택된 option의 text값이 들어가게 하고,
value변수에 select태그 요소의 options 중에 선택된 option의 value값이 들어가게 하여
각각을 콘솔창에 출력함

결과 확인

페이지

콘솔창

⇒ select박스에서 -를 선택하고 버튼을 클릭하여 콘솔창을 확인해보면
select요소를 담아준 operators안에는 select태그 안의 코드가 모두 들어가 있고
선택한 option의 text값을 담아준 operator는 - 가 들어가 있고, 
선택한 option의 value값을 담아준 value에는 minus가 들억가 있음을 확인할 수 있다.