[자바스크립트] select객체
공부방/자바스크립트 / 2009. 9. 4. 10:34
| ■ 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 |
'공부방 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] 새로고침 (0) | 2009.10.09 |
|---|---|
| [자바스크립트] 숫자만 입력하기 (0) | 2009.09.05 |
| [자바스크립트] 이벤트 (0) | 2009.09.04 |
| [자바스크립트] 문자열 (0) | 2009.09.04 |
| [자바스크립트] 배열 (0) | 2009.09.04 |