HTML DOM 데이터 목록 옵션 컬렉션

<시간/>

HTML DOM Datalist options 컬렉션은 HTML 요소 내부에 있는 옵션 값 컬렉션을 설정하거나 반환하는 데 사용됩니다. 요소는 문서에 있는 것과 동일한 순서로 나타납니다.

속성

다음은 Datalist options Collection −

의 속성입니다.

속성	설명
길이	컬렉션의

방법

다음은 Datalist 옵션 컬렉션을 위한 방법입니다 -

메소드	설명
[색인]	지정된 인덱스에 있는 컬렉션의
항목(색인)	주어진 인덱스를 사용하여 컬렉션에서
namedItem(id)	주어진 id를 가진 컬렉션에서

구문

다음은 Datalist options Collection −

의 구문입니다.

datalistObject.options

예시

Datalist 옵션 컬렉션의 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h2>Datalist option elements example</h2>
<form>
<input list="fruits">
<datalist id="fruits">
<option value="Papaya">
<option value="Strawberry">
<option value="Guava">
<option value="Mango">
</datalist>
</form>
<p>Click the below button to display the number of datalist option elements</p>
<button onclick="elementNo()">COUNT</button>
<p id="Sample"></p>
<script>
   function elementNo() {
      var fLength = document.getElementById("fruits").options.length;
      document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options";
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 데이터 목록 옵션 컬렉션

COUNT 버튼 클릭 시(데이터 목록을 클릭하여 요소를 직접 계산할 수 있음) -

HTML DOM 데이터 목록 옵션 컬렉션

속성 목록 값이 "fruits"인 입력 상자를 만들어 동일한 ID의 데이터 목록에 연결했습니다. 이것은 입력 상자에 입력할 때 데이터 목록이 옵션 값으로 입력 텍스트를 완성하려고 시도한다는 것을 의미합니다. id가 "fruits"인 데이터 목록이 생성되고 그 안에 4개의 옵션 값이 있습니다. 데이터 목록과 연결된 입력 상자는 모두 −

형식 안에 있습니다.

<form>
<input list="fruits">
<datalist id="fruits">
<option value="Papaya">
<option value="Strawberry">
<option value="Guava">
<option value="Mango">
</datalist>
</form>

그런 다음 사용자가 클릭할 때 elementNo() 메서드를 실행하는 버튼 COUNT를 만들었습니다.

<button onclick="elementNo()">COUNT</button>

elementNo() 메서드는 getElementById() 메서드를 사용하여 데이터 목록의 options.length 속성 값을 가져와 변수 fLength에 할당합니다. 그런 다음 innerHTML 속성을 사용하여 id가 "Sample"인 단락에 옵션 개수 값이 표시됩니다 -

function elementNo() {
   var fLength = document.getElementById("fruits").options.length;
   document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options";
}