<select><option> 활용

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

 

select, option  [LIST]

 
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

댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -