add select option

reference site 
http://www.java2s.com/Tutorial/JavaScript/0200__Form/0240__Select.htm
http://www.devguru.com/Technologies/ecmascript/quickref/option.html

select 객체에 동적으로 아이템 추가하기

1. select 객체 얻어오기
2. option 객체 생성하기
3. select 객체에 option 객체 붙여넣기

<select name="myselect" id="myselectid">
    <option value="10">임시옵션</option>
</select>

1. select 객체 얻어오기

var selectObject=document.all["myselect"];
또는
var selectObjects=document.getElementsByNames["myselect"];
또는
var selectObject=document.getElementById["myselectid"];

2. option 객체 생성하기
var option=new Option("새로운옵션");

new Option([text[, value[, defaultSelected[, selected]]]])


3. select 객체에 option 객체 붙여넣기
selectObject.options[0] = option;
또는
selectObjects[0].options[0] = option; (getElementsByNames() 로 가져왔을 경우)

자세하게는 알지 못하지만, 자바스크립트에 기본적으로 Option 객체가 있어서,

그 객체를 통해서 html의 <select>태그 안에 들어가는 <option>태그들을

자바스크립트 단에서 추가해 줄 수가 있다.

아래 박스 내용 참조

Option 개체는 form 개체(HTML <FORM> 태그) 속의 select 개체(HTML <SELECT> 태그) 속에서 <OPTION> 태그로 생성된다. 

<FORM>...<SELECT><OPTION>...</OPTION> <OPTION>...</OPTION>...</SELECT>...</FORM>

또한 Javascript로도 생성, 항목추가를 할 수 있다. 

optionObj=new Option([text[,value[,defaultSelected[,selected]]]])

document.formObj.selectObj.optionObj[3]=new Option('선택 4','value4',true,true);
document.formObj.selectObj.optionObj[4]=new Option('선택 5','value5')

생성된 선택항목을 삭제할 수도 있다. history.go(0)로 새로 로딩해야 문서에 반영된다. 
document.formObj.selectObj.optionObj[3]=null;
history.go(0);

new Option() 을 통해서 인자값을 2개, 또는 4개를 넣어서 객체를 생성한 다음에,

html의 select dom 을 가져와 값을 대입하여 스크립트 단에서 동적으로 셀렉트 박스에 있는

옵션들을 추가할 수 있게된다.

내가 겪었던 문제는 바로 이 Option 객체를 생성하는 부분에서 익스플로어 버젼에 따른

문제였다.

Option 객체를 만들 때,

var opt = Option("--------이름----------", "value값");

위 박스의 내용처럼, 'new' 라는 키워드를 사용하지 않고서 사용을 해도

IE7 이하 버젼까지는 무리없이 동작한다.

하지만 IE8에서는 저렇게 하면 스크립트 오류가 난다는 사실을 발견하였다.

var opt = new Option("-------이름--------", "value값");

반드시 new 라는 키워드를 사용해서 생성해 줘야 한다.

IE7 에서 스크립트 오류나는것 수정하면서 발견된 사항 - 끝 -