데이터 목록 옵션 컬렉션
예시
특정 <datalist> 요소에 몇 개의 옵션이 있는지 알아보십시오.
var x = document.getElementById("browsers").options.length;
x 의 결과 는 다음과 같습니다.
5
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
options 컬렉션은 <datalist> 요소의 모든 옵션 컬렉션을 반환합니다.
참고: 컬렉션의 요소는 소스 코드에 나타나는 대로 정렬됩니다.
브라우저 지원
| Collection | |||||
|---|---|---|---|---|---|
| options | Yes | 10.0 | Yes | Yes | Yes |
통사론
datalistObject.options
속성
| Property | Description |
|---|---|
| length | Returns the number of <option> elements in the collection. Note: This property is read-only |
행동 양식
| Method | Description |
|---|---|
| [index] | Returns the <option> element from the collection with the specified index (starts at 0). Note: Returns null if the index number is out of range |
| item(index) | Returns the <option> element from the collection with the specified index (starts at 0). Note: Returns null if the index number is out of range |
| namedItem(id) | Returns the <option> element from the collection with the specified id. Note: Returns null if the id does not exist |
기술적 세부 사항
| DOM 버전: | 핵심 수준 2 문서 개체 |
|---|---|
| 반환 값: | <datalist> 요소의 모든 <option> 요소를 나타내는 HTMLCollection 개체입니다. 컬렉션의 요소는 소스 코드에 나타나는 대로 정렬됩니다. |
더 많은 예
예시
[ 인덱스 ]
데이터 목록에서 첫 번째 옵션(인덱스 0)의 값을 가져옵니다.
var x = document.getElementById("browsers").options[0].value;
x 의 결과 는 다음과 같습니다.
Internet Explorer
예시
항목( 인덱스 )
데이터 목록에서 첫 번째 옵션(인덱스 0)의 값을 가져옵니다.
var x = document.getElementById("browsers").options.item(0).value;
x 의 결과 는 다음과 같습니다.
Internet Explorer
예시
명명된 항목( name_or_id )
데이터 목록에서 id="google"인 옵션 값을 가져옵니다.
var x = document.getElementById("browsers").options.namedItem("google").value;
x 의 결과 는 다음과 같습니다.
Chrome
예시
데이터 목록의 모든 옵션을 반복하고 옵션 값을 출력합니다.
var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0; i < x.options.length; i++) {
txt = txt + x.options[i].value + "<br>";
}
txt 의 결과 는 다음과 같습니다.
Internet Explorer
Firefox
Chrome
Opera
Safari
❮ 데이터 목록 개체