<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}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.11
5.12
5.13
5.14
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1