HTML DOM 데이터 목록 옵션 컬렉션의 중국어 번역은 'HTML DOM 데이터 목록 옵션 컬렉션'입니다.-HTML 튜토리얼-php.cn

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

WBOY

풀어 주다： 2023-09-02 11:09:14

앞으로

865명이 탐색했습니다.

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 데이터 목록 옵션 컬렉션'입니다.

속성 목록 값 "과일"을 사용하여 입력 상자를 만들고 이를 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!