이전 글/JavaScript

10. JavaScript Ex.09 options

usnooy_ 2018. 1. 17. 23:00

본 글은 HTML5, CSS 학습한 상태에서 작성한 글입니다.















- options ?


options는 <select>요소에 사용된다.

<select>의 <option>들을 제어하는데 주로 사용이 되며, 배열로 이루어져 있다.





속성


length , item, selected 


-length : 컬렉션의 길이를 반환하거나 지정


-item : options 배열변수 개체의 개별 항목 Option 개체를 반환


- selected : select 개체의 option 개체 배열 변수 중에서 선택되었는지를

true, false값으로 반환


-value : 해당 옵션의 value값을 가져온다.


-text : 옵션 사이에 있는 텍스트 값을 가져온다.



ex) 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<body>
<select name="selectBox" id="selectBox">
    <option value="가" selected>A</option>
    <option value="나">B</option>
    <option value="다">C</option>
</select>
</body>
 
<script type="text/javascript">
    var target = document.getElementById("selectBox");
    alert('선택된 옵션 text 값=' + target.options[target.selectedIndex].text);     // 옵션 text 값
       alert('선택된 옵션 value 값=' + target.options[target.selectedIndex].value);     // 옵션 value 값
 
</script>
 
</html>
 
 
출처: http://gocoder.tistory.com/51 [고코더의 개발 Express]
cs

---------------------------


메서드


add, item, namedItem, remove, tag, urns...