집 >웹 프론트엔드 >HTML 튜토리얼 >HTML DOM 데이터 목록 옵션 컬렉션의 중국어 번역은 'HTML DOM 데이터 목록 옵션 컬렉션'입니다.

HTML DOM 데이터 목록 옵션 컬렉션의 중국어 번역은 'HTML DOM 데이터 목록 옵션 컬렉션'입니다.

WBOY앞으로: 2023-09-02 11:09:14874검색

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

Properties

다음은 Datalist 옵션 컬렉션의 속성입니다.

Property	Description
Length	에 있는

Methods

다음은 Datalist 옵션 컬렉션의 방법입니다 -

item(index)

Method	Description
[index] td>	Re 지정된 인덱스의 컬렉션에서 전환
주어진 인덱스에 있는 컬렉션의
namedItem(id)	ID가 지정된 컬렉션에서

구문

다음은 Datalist 옵션 컬렉션의 구문입니다.

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 Datalist options Collection 的中文翻译是 "HTML DOM 数据列表选项集合"

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

HTML DOM 데이터 목록 옵션 컬렉션의 중국어 번역은 'HTML DOM 데이터 목록 옵션 컬렉션'입니다.

속성 목록 값 "과일"을 사용하여 입력 상자를 만들고 이를 List에 연결합니다. 동일한 ID를 가진 데이터입니다. 이는 입력 상자에 입력할 때 데이터 목록이 옵션 값을 사용하여 입력 텍스트를 완성하려고 시도한다는 것을 의미합니다. 4개의 옵션 값을 사용하여 ID가 "fruits"인 데이터 목록이 생성됩니다. 데이터 목록과 연결된 입력 상자는 모두 양식 내에 존재합니다. -

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

그런 다음 사용자가 버튼을 클릭할 때 elementNo() 메서드를 실행하는 COUNT 버튼을 만듭니다. - getElementById( )를 사용하여

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

elementNo() 메서드를 사용합니다. 메소드는 데이터 목록의 options.length 속성 값을 가져와 변수 fLength에 할당합니다. 그런 다음 innerHTML 속성 -

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

을 사용하여 ID가 "Sample"인 단락에 옵션 개수 값을 표시합니다.

위 내용은 HTML DOM 데이터 목록 옵션 컬렉션의 중국어 번역은 'HTML DOM 데이터 목록 옵션 컬렉션'입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html NULL count Length Collection dom innerHTML td th

성명：

이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：HTML 요소가 포커스를 잃을 때 스크립트를 실행하시겠습니까?다음 기사：HTML 요소가 포커스를 잃을 때 스크립트를 실행하시겠습니까?