예제 9-19. select 객체에서 선택한 과일 출력
WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 15:46 |* select 객체와 onchange
select 객체는 <select> 태그에 의해 만들어진 콤보박스를 나타내며, option 객체는 <option> 태그로 표현되는 옵션 아이템을 나타낸다.
* 선택된 옵션 알아내기
선택된 옵션은 select 객체의 selectedIndex로 알아낼 수 있다.
ex)
var sel = document.getElementById("fruits");
var index = sel.selectedIndex; // index는 선택 상태의 옵션에 대한 인덱스, selectedIndex 프로퍼티 값이 음수이면 아무 옵션도 선택되지 않은 상태이다.
* select와 onchange 리스너
select 객체에 다른 옵션이 선택되면 select 객체의 onchange 리스너가 호출된다.
다음은 onchange 리스너에서 drawImage() 함수를 호출하도록 만든 코드이다.
<select id="fruits" onchange="drawImage()">...</select>
* select 객체의 프로퍼티와 컬렉션
프로퍼티
length // 옵션 개수
selectedIndex // 선택된 옵션의 인덱스 번호
size // 콤보박스에 보여지는 옵션의 개수
컬렉션
options // 콤보 박스에 들어 있는 모든 옵션 객체(option 타입)들의 컬렉션
* option 객체의 프로퍼티
selected // 옵션이 선택된 상태이면 true
text // 옵션 문자열
value // value 속성 문자열
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <title>select 객체에서 선택한 과일출력</title> <script> function drawImage() { var found = null; var sel = document.getElementById("fruits"); var img = document.getElementById("fruitimage"); for(var i=0; i<sel.length; i++) { if(sel[i].selected == true) { found = sel[i]; break; } } //img.src = sel.options[sel.selectedIndex].value; img.src = found.value; } </script> </head> <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> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| window 객체, window 객체의 프로퍼티와 메소드 // 수정해야됨 p 438 (0) | 2017.11.02 |
|---|---|
| 예제 9-20. 키 이벤트 리스너 (0) | 2017.11.02 |
| 예제 9-17. 선택된 라디오버튼 알아내기. 예제 9-18. 체크박스로 선택한 물품 계산 (0) | 2017.11.02 |
| 예제 9-16. onfocus와 onblur, 이름을 입력하지 않고 다른 창으로 갈 수 없음. (0) | 2017.11.02 |
| 예제 9-15. 이미지 갤러리 만들기 : new Image()로 이미지 로딩 (0) | 2017.11.02 |