브라우저 내장객체 - select, option

select ........................................................... 여러 항목중에 고를 수 있도록 한 목록 상자로 많이 사용된다. 보통 콤보 상자라고 많이 알고 있더라구.

■ select (HTML)

<select name="addr"> <option value="서울 마포구 드래곤">서울 마포구 드래곤아이 <option value="경기 군포시 드래곤">경기 군포시 드래곤아이 <option value="강원 원주시 드래곤">강원 원주시 드래곤아이 </select>

select 태그에서 size=정수 속성으로 보여줄 리스트수를 설정할 수 있다. select 태그에서 multiple 속성을 설정하여 여러개 선택을 할 수 있다. option 태그에서 selected 속성으로 디폴트 선택을 줄 수 있다.

■ select 객체 속성

name	태그 name 속성값 (addr)
length	목록의 개수 (3)
selectedIndex	선택한 목록 인덱스 번호 (0 부터)
options	목록상자 값을 배열로 (익스플로러 지원안됨)
options[0].text	0번째 목록의 문자 (서울 마포구 드래곤아이)
options[0].value	0번째 목록의 value (서울 마포구 드래곤)
options[0].selected	0번째 목록이 선택되면 true 아니면 false
options[0].defaultSelected	0번째 목록이 기본으로 선택되어 있는지

■ select 객체 이벤트핸들러

onChange

현재 선택된 목록이 아닌 다른 목록을 선택시

■ select 객체 예제 : 주소 검색 결과를 선택하기

<script language="javascript"> function Check(){ i =document.form1.addr.selectedIndex // 선택항목의 인덱스 번호 if (i<0) { alert("주소를 선택!") return } var address1 = document.form1.addr.options[i].value // 선택항목 value var address2 = document.form1.addr.options[i].text // 선택항목 text alert(address1) // value 확인 alert(address2) // text 확인 } </script> <form name="form1" action="ok.asp" method="post"> <select name="addr" size="3"> <option value="서울 마포구 드래곤">서울 마포구 드래곤아이 <option value="경기 군포시 드래곤">경기 군포시 드래곤아이 <option value="강원 원주시 드래곤">강원 원주시 드래곤아이 </select> <input type="button" value="등록" onClick="Check()"> </form> document.form1.addr.selectedIndex 선택항목의 인덱스 번호 ==> 선택이 안되면 -1을 리턴 document.form1.addr.options[i].value 선택항목 value