-
[JavaScript] 폼과 이벤트 활용 : select 객체와 onchange개발 프로세스/Front-end 2021. 6. 17. 15:23
목차
select 객체의 프로퍼티와 컬렉션
length 옵션 개수 r selectedIndex 선택된 옵션의 인덱스 번호 r/w size 콤보박스에 보여지는 옵션의 개수 r/w options 콤보 박스에 들어 있는 모든 옵션 객체(option 타입)들의 컬렉션 option 객체의 프로퍼티
selected 옵션이 선택 상태이면 true r/w text 옵션 문자열 r/w value value 속성 문자열 r/w onchange 리스너
select 객체에 다른 옵션이 선택되면 select 객체의 onchange 리스너가 호출된다.
function drawImage() { var sel = document.getElementById("fruits"); var img = document.getElementById("fruitimage"); img.src = sel.options[sel.selectedIndex].value; }<body onload="drawImage()"> <h3>select 객체에서 선택한 과일 출력</h3> <hr> 과일을 선택하면 이미지가 출력됩니다.<p> <form> <select id="fruits" onchange="drawImage()"> <option value="media/strawberry.png"> 딸기 <option value="media/banana.png" selected> 바나나 <option value="media/apple.png"> 사과 </select> <img id="fruitimage" src="media/banana.gif" alt=""> </form> </body>'개발 프로세스 > Front-end' 카테고리의 다른 글
[JavaScript] 폼과 이벤트 활용 : onreset, onsubmit (0) 2021.06.17 [JavaScript] 폼과 이벤트 활용 : 키 이벤트, onkeydown, onkeypress, onkeyup (0) 2021.06.17 [JavaScript] 폼과 이벤트 활용 : 라디오버튼과 체크박스 (0) 2021.06.17 [JavaScript] 폼과 이벤트 활용 : onfocus와 onblur (0) 2021.06.17 [JavaScript] 문서와 이미지 로딩, onload (0) 2021.06.17