웹디자인/웹마스터 관련강좌 ㅣ JavaScript 강좌 ㅣ 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 |
출처 : http://cafe.naver.com/webheaven.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=936
