[자바스크립트] SELECT 박스 선택시 option 안의 텍스트 다른 필드에 출력하기

SELECT박스의 OPTION을 동적으로 선택할 때에 (이벤트 발생시) 

보통은 option의 value를 가지고 데이터를 처리하지만, 

간혹 다른 필드에 option에 선택된 값들을 출력하는 일들도 있을 수 있습니다.

예를 들어, 

아래 SELECT박스의 값을 선택할시에, SUBJECT라는 ID의 INPUT 박스에 값을 세팅한다면,

Colored By Color Scripter™

1 2 3 4 5 6 7

<select id="" name="" onChange="javascript:fn_changeSelected(this);">         <option value="">--선택--</option>         <option value="1">첫번째</option>         <option value="2">두번째</option>         <option value="3">세번째, 끝!!!</option> </select>

fn_changeSelected()라는 함수에서 object타입으로 값을 받습니다.

그리고, fn_changeSelected() 함수에서 아래와 같이 세팅을 할 수가 있죠.

Colored By Color Scripter™

1 2 3 4 5 6

function fn_changeSelected(obj) {   var getObj = obj[obj.selectedIndex].innerHTML;     $("input[name='SUBJECT']").val(getObj);   // 혹은, document.getElementById("SUBJECT").value = getObj;   등등 }

이런식으로 구현을 하면 결과값으로는

SELECT 박스를 순서대로 선택한다고 할 때에

SUBJECT라는 INPUT 박스에는 

[첫번째]

[두번째]

[세번째. 끝!!!]

의 내용이 출력될 것입니다.

아, 물론 obj.value를 하게 되면 option의 텍스트가 아닌 value가 출력되겠지요.

이 외에,

obj.selectedIndex 를 보게 되면 선택한 index가 반환되고,

obj[obj.selectedIndex].value 를 보게 되면 선택한 값을 출력한다고 하는데, 

이것은 테스트 결과 obj.value와 동일한 결과를 출력합니다.

obj.id를 보면 해당 select박스의 id값을 가져오게 됩니다.

IE가 아닌 타 브라우저에서는 .innerHTML이 아닌 .text를 사용하기도 한다고 합니다. 

월드컵 때문에 너무 졸.. 졸려워.. !!!!!!!