select박스의 onchange에서 this.value 사용하기

웹개발한지 3년째인데 이제서야 알게 되긴 했지만,
안까먹기 위해서 정리해둔다.

select box에서 onchange 함수를 자주 사용하는데

대략 이렇다.

<select id="seledtBox" onchange="alert(this.value)">

<option id="0">value1</option>
<option id="0">value1</option>
<option id="0">value1</option>
<option id="0">value1</option>
<option id="0">value1</option>

</select>

이렇게 해놓구 테스트를 해보면
경고창에는 빈값만 뜨게 되는데 이걸 돌아가게 만들려면 아래와 같이 한다.

<select id="seledtBox" onchange="alert(this.value)">

<option id="0" value="value1">value1</option>
<option id="1" value="value2">value2</option>
<option id="2" value="value3">value3</option>
<option id="3" value="value4">value4</option>
<option id="4" value="value5">value5</option>

</select>

이경우에는 option의 속성으로 있는 value값이 넘어가게 된다.
동일하게 다른 함수에서 ID값으로 참조하여 선택되어져 있는 option의 value값을 가져올수 있다.

var selectValue = document.getElementById('selectBox').value;
alert(selectValue);

요렇게 간단히 불러올 수 있다.

혹은

<select id="seledtBox" onchange="alert(this.options[this.selectedIndex].text)">

<option id="0">value1</option>
<option id="1">value2</option>
<option id="2">value3</option>
<option id="3">value4</option>

<option id="4">value5</option>

</select>

이 경우에는 <option id="0">value1</option> 에서 진하게 표시한 text부분이 값으로 넘어가게 된다.

이런 미묘한 차이가 있다는걸 이제서야 알다니..ㅠㅠ

그래도 지식이 늘어나는건 좋은 일이구놔~~