자바스크립트(JavaScript)와 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