<form>태그의 <select> 태그 객체를 가리킬 때 사용합니다. 셀렉트 객체는 옵션(<option>) 객체랑 함께 생각해야 합니다. 셀렉트 객체는 옵션 객체에 접근하는 방법을 제공합니다.
셀렉트 객체 자체에 접근하는 속성
length 속성
- 셀렉트 객체가 가진 옵션 리스트의 길이를 가져옵니다.
disabled 속성
- 셀렉트 박스의 사용 여부를 결정합니다. 사용을 금지하고 싶을 때는 disabled=true 값을 주고 사용을 허용할 때는 diabled=false를 주면됩니다.
size 속성
- 셀렉트 박스에서 보여지는 리스트의 갯수를 결정합니다. size=수 형태로 작성합니다.
selectedIndex 속성
- 셀렉트 박스에서 선택된 옵션의 배열 인덱스를 반환합니다. 인덱스의 시작은 0부터 입니다.
셀렉트 객체를 통해 옵션 객체에 접근하기
셀렉트 객체에서 옵션 객체에 접근하기 위해서는 options[] 속성을 이용합니다.
만약, 셀렉트에서 두번째 옵션 객체에 접근하기 위해선 다음과 같이 작성하면 됩니다.
document.getElementById('셀렉트객체').options[1]
예제
<html>
<head>
<script type="text/javascript">
function test() {
var selectBox = document.getElementById("test");
// 셀렉트 객체를 가져옵니다.
var optionsLength = selectBox.length;
// 섹렉트 객체의 옵션 리스트 길이를 가져옵니다.
var selectIndex = selectBox.selectedIndex;
// 셀렉트 객체의 선택된 옵션의 인덱스 값을 가져옵니다. 0부터 시작합니다.
var value = selectBox.options[selectBox.selectedIndex].value;
// 셀겍트 객체에서 선택된 옵션의 값을 가져옵니다.
var textValue = selectBox.options[selectBox.selectedIndex].text;
// 셀렉트 객체에서 선택된 옵션의 텍스트 값을 가져옵니다.
selectBox.disabled=true;
// 셀렉트 박스를 사용금지로 바꿉니다.
selectBox.options[2].selected=true;
// 셀렉트 박스의 3번째 옵션을 선택합니다.
}
</script>
</head>
<body>
<select id="test">
<option value="1">1번</option>
<option value="2">2번</option>
<option value="3">3번</option>
</select>
<a href="#" onclick="test();">테스트</a>
</body>
</html>
옵션 객체에 접근한 다음 옵션의 값이나 텍스트 문장을 얻고 싶을 때는 value 속성과 text 속성을 사용하면 됩니다. 또한, 옵션을 선택하기 위해서는 selected 속성의 값을 true로 주면 됩니다.
하나를 선택하세요 :
<select id="select">
<option value="1">하나</option>
<option value="2">둘</option>
<option value="3">셋</option>
<option value="4">넷</option>
</select>
<script type="text/javascript">
x = document.getElementById("select");
// 옵션의 전체 내용을 출력
for ( i = 0 ; i < x.length ; i++ ) {
document.writｅln( x.options[i].text );
}
// 선택된 값을 출력
x.options[x.selectedIndex].text;
x.options[x.selectedIndex].value;
</script>
'Java Script & DOM > HTML DOM' 카테고리의 다른 글
| HTML 엘레멘트를 나타내는 HTMLElement 객체 (0) | 2010.12.16 |
|---|---|
| HTML Document 객체 (0) | 2010.12.16 |
| DOM Area 객체 (0) | 2009.11.05 |
| DOM input radio 객체 (0) | 2009.11.04 |
| DOM Style 객체 (CSS 관련 객체) (0) | 2009.10.26 |