Document의 하위객체 - Select 객체

+콤보박스나 목록상자에서 사용

+ document.폼의이름.콤보박스나 목록상자의 이름.속성

  document.폼의이름.콤보박스나 목록상자의이름.메소드()

 

[속성]

속성	설명
length	콤보박스나 목록상자에 포함된 항목의 개수
name	콤보박스나 목록상자의 이름
options	콤보박스나 목록상자에 포함된 항목들로 배열형태로 제공
selectedIndex	선택한 항목의 인덱스 번호
type	목록상자의 다중 선택(multiple)정보

 

 

[항목의 속성]

속성	설명
defaultSelected	해당 항목 에서 selected로 되어있는지 아닌지에 정보(true,false)
selected	해당 항목이 선택되었는지 아닌지에 대한 정보(true,false)
text	해당 항목이 화면에 보여주는 내용
value	해당 항목의 실직적인 값

 

 

[메소드]

메소드	설명
blur()	콤보박스나 목록상자에서 커서를 사라지게 한다
focus()	콤보박스나 목록상자에 커서를 위치시킨다

 

 

[이벤트]

메소드	설명
onBlur()	콤보박스나 목록상자에서 커서가 사라지면 발생하는 이벤트
onChange()	항목의 선택을 변경할 때 발생하는 이벤트
onFocus	콤보박스나 목록상자에서 커서가 위치하면 발생하는 이벤트

 

 

☞ option_name = new Option([optionText,optionValue,defaultSelected,selected])

 

예)

소스	option1=new Array(4) option2=new Array(4) option3=new Array(4) option1[0] = new Option("황기태","1-1",true,true) option1[1] = new Option("이재문","1-2") option1[2] = new Option("최창렬","1-3") option1[3] = new Option("강승식","1-4") option2[0] = new Option("서태지","2-1") option2[1] = new Option("이소라","2-2",true,true) option2[2] = new Option("양  파","2-3") option2[3] = new Option("잭  키","2-4") option3[0] = new Option("태진아","3-1") option3[1] = new Option("조용필","3-2") option3[2] = new Option("조영남","3-3") option3[3] = new Option("주현미","3-4",true,true) function cOpt(r,y) { sel = r.form.s; switch(y){ case 1 : for(var i=0;i<4;i++)   sel.options[i]=option1[i]   break; case 2 : for(var i=0;i<4;i++)   sel.options[i]=option2[i]   break; case 3 : for(var i=0;i<4;i++)   sel.options[i]=option3[i]   break; } } Select 객체 예 : 동적으로 옵션을 변경하는 예 학년을 선택하세요   <form name="f"></form> <input onclick="cOpt(this,1)" type="radio" name="id" />1학년 <input onclick="cOpt(this,2)" type="radio" name="id" />2학년 <input onclick="cOpt(this,3)" type="radio" name="id" />3학년 장학생 1 명을 선택하시오
결과
소스	Select 객체의 옵션 제거하기 <form name="f"></form> 버튼을 클릭하면 아래의 취미 옵션 중에 두 번째 것만 제거합니다   취미 : 테니스 축구 야구 배구 <input onclick="this.form.s.options[1]=null" type="button" value="2번째 옵션 지우기" />
결과

[출처]Document의 하위객체 - Select 객체|작성자밤비

[출처] [링크스크랩] Document의 하위객체 - Select 객체|작성자 관절분리