[Javascript] new Option() 사용시 하나의 Tip.

앞에 글에서 new Option()을 써서 동적으로 select option을 생성, 변경하는 방법에 관한 글을 올렸습니다. ( 아래 내용보기... 클릭하면 앞에 쓴 글을 볼 수 있습니다. ^^ )

아래와 같은 방법으로 자바스크립트로 select option 생성, 변경이 가능합니다. ^^

function aaa()
{
  var j = 0;

  for(i=0;i<document.form.dong.options.length;i++)
  {
    document.form.dong.options[i] = null;
  }

  document.form.dong.options[0]=new Option('none','번지수에서');
  document.form.dong.options[1]=new Option('first','1번');
  document.form.dong.options[2]=new Option('second','2번');
}

function bbb()
{
  var j = 0;

  for(i=0;i<document.form.dong.options.length;i++)
  {
     document.form.dong.options[i] = null;
  }

  document.form.dong.options[0]=new Option('none','층수에서');
  document.form.dong.options[1]=new Option('first','1층');
  document.form.dong.options[2]=new Option('second','2층');
  document.form.dong.options[3]=new Option('third','3층');
  document.form.dong.options[4]=new Option('fourth','4층');
}


추가적으로 new Option에는 4가지 매개변수를 쓸 수 있답니다.
아래처럼...

var options = new Option(val_data, key_data, true, (key == key_data));
selectobj.options[startindex++] = options;

그 의미는
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);


더 자세한 정보는 아래 사이트에 있답니다. ^^
http://koxo.com/lang/js/object/Option.html 

그런데 제가 쓰다 보니까요~ 적용이 잘 안되는 부분이 있어서 이렇게 간단한 하나의 Tip을 써 봅니당~ ㅋㄷ

일단 이번 내용도 제가 아직 수련이 부족하여 잘 적용하지 못하여 어리버리 코딩이 되는 바람에 이런 현상이 발생할 수 있다는 전제하에 읽어주세욥. ㅋㅋ

머가 문제냐 하면요~
optionObj=new Option([text[,value[,defaultSelected[,selected]]]]) 부분에서 [,defaultSelected[,selected]] 부분이 제대로 적용이 안되는 문제랍니다.

그리하야 이리저리 하던중에
http://koxo.com/lang/js/object/Option.html
이 사이트에서 얻은 정보를 통해 문제를 해결했습니다.
( 정보 : selectdIndex 속성 ⇒
           Option 개체에서 현재 선택되어 있는 인수(index)를 반환하거나 설정한다. )

예를 들어...
var options = new Option(val_data, key_data, true, (key == key_data));
selectobj.options[startindex++] = options;
(add()를 써서 selectobj에 options 값을 동적으로 생성할 수도 있답니다.)

위의 경우
var options = new Option(val_data, key_data);
selectobj.options[startindex] = options;

이렇게 한뒤
if(key == key_data)
selectobj.options.selectedIndex = startindex;
startindex++;

이렇게 해주니까 적용이 되더라구요~ ㅡㅡㅋ
혹시 제가 설명한 부분에서 문제가 있거나 이 방법 말고 다른 방법을 알고 계신 분은 좀 알려주세요~^^