Datalist 옵션 집합

HTML DOM 데이터 목록 객체

정의와 사용법

옵션 집합은 반환됩니다。 <datalist> 요소 모든 항목의 집합.

주석：집합의 요소는 원본 코드에서 나타나는 순서로 정렬됩니다。

다른 참고 사항:

HTML 참조 매뉴얼：HTML <datalist> 태그

HTML 참조 매뉴얼：HTML <option> 태그

예제

예제 1

지정된 <datalist> 요소에 있는 항목 수를 찾습니다：

var x = document.getElementById("browsers").options.length;

직접 테스트해 보세요

x의 결과는 다음과 같을 것입니다：

5

알림：페이지 하단에 더 많은 예제가 제공됩니다。

문법

datalistObject.options

속성

속성 설명
length

집합에서 <option> 요소의 수를 반환합니다。

주석：이 속성은 읽기 전용입니다。

메서드

메서드 설명
[index]

지정된 인덱스(0부터 시작)의 <option> 요소를 집합에서 반환합니다。

주석：인덱스 번호가 범위를 벗어나면 null을 반환합니다。
item(index)

지정된 인덱스(0부터 시작)의 <option> 요소를 집합에서 반환합니다。

주석：인덱스 번호가 범위를 벗어나면 null을 반환합니다。
namedItem(id)

지정된 id 집합에서 <option> 요소를 반환합니다。

주석：만약 id 없으면 null을 반환합니다。

기술 세부 사항

DOM 버전： Core Level 2 Document Object
반환 값：

HTMLCollection 객체는 <datalist> 요소에 있는 모든 <option> 요소。

집합의 요소는 원본 코드에서 나타나는 순서로 정렬됩니다。

브라우저 지원

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 10.0 지원 지원 지원

더 많은 예제

예제 2：[index]

데이터 목록에서 첫 번째 항목(인덱스 0)의 값을 가져옵니다：

var x = document.getElementById("browsers").options[0].value;

직접 테스트해 보세요

x의 결과는 다음과 같을 것입니다：

Internet Explorer

예제 3：item(index)

데이터 목록에서 첫 번째 항목(인덱스 0)의 값을 가져옵니다：

var x = document.getElementById("browsers").options.item(0).value;

직접 테스트해 보세요

x의 결과는 다음과 같을 것입니다：

Internet Explorer

예제 4：namedItem(name_or_id)

데이터 목록에서 id="google"의 항목 값을 가져옵니다：

var x = document.getElementById("browsers").options.namedItem("google").value;

직접 테스트해 보세요

x의 결과는 다음과 같을 것입니다：

Chrome

예제 5

데이터 목록의 모든 항목을 순회하며 항목 값을 출력합니다：

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

HTML DOM 데이터 목록 객체