HTML DOM Datalist 옵션 컬렉션은 HTML
다음은 Datalist 옵션 컬렉션의 속성입니다.
Property | Description |
---|---|
Length | 에 있는 |
다음은 Datalist 옵션 컬렉션의 방법입니다 -
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>
그러면 다음과 같은 출력이 생성됩니다.
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!