목차
- list 예제 - 입력 가능 데이터 리스트 객체 반환
- list 정의
- list 구문
list 예제 - 입력 가능 데이터 리스트 객체 반환
<form action="/action_page.php" method="get">
<label for="hz">자신있는 코딩언어는?</label>
<input list="lang" name="hz" id="hz">
<datalist id="lang">
<option value="HTML">
<option value="CSS">
<option value="JS">
<option value="PHP">
<option value="SQL">
</datalist>
<input type="submit">
</form>
<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>
<div id="demo4"></div>
<script>
let x = document.getElementById("hz").list;
demo1.innerHTML = x; // [object HTMLDataListElement]
demo2.innerHTML = x.id; // lang
demo3.innerHTML = x.options; // [object HTMLCollection]
demo4.innerHTML = x.options.length; // 5
</script>
결과보기
list 정의
INPUT 텍스트 필드에 입력 가능한 datalist에 대한 참조 반환.
1.
2
IE10 이상 주요 최신 브라우저 지원.
단, Safari 브라우저는 지원 X.
list 구문
datalist 객체 반환
textObject.list
PS.
datalist 객체의 id 반환
textObject.list.id
datalist 객체의 option 객체 반환
textObject.list.option
datalist 객체의 option 객체의 개수 반환
textObject.list.option.length