[html5] datalist 사용법

풍선도움말...

ㆍ호가계부를 시작페이지로

금융신고
1332

온비드

주택금융공사

[무료] 오늘의 운세 / 바이오리듬

여기는 회원님이 직접 등록하신
즐겨찾는 사이트가 출력됩니다.

컴퓨터와 관련있는 모든 팁을 공유합시다.

[html5] datalist 사용법

호가계부|2022-05-05 17:59:22|조회 : 38134

datalist에서 보여지는 값 이 아닌 숨겨진 값을 알아내는 방법

자바스크립트 함수
function datalistChange() {
    var appName = document.getElementById("app").value;
    var appValue = document.querySelector(#apps option[value='" + appName + "']).dataset.value;
    console.log(appValue);
}

html 태그
<input type="text" list="apps" id="app" />
<datalist id="apps">
    <option data-value="1" value="호 가계부" />
    <option data-value="2" value="호 경조관리" />
    <option data-value="3" value="호 업무관리" />
    <option data-value="4" value="호 재고관리" />
    <option data-value="5" value="호 주차관리" />
    <option data-value="6" value="호 핫딜" />
    <option data-value="7" value="호 World News" />
</datalist>

호가계부	2022-05-05 17:59:22

번호	제 목	첨부	작 성 일	작성자	조회
124	[javascript] select potion 제어 변수들		2022-10-17	호가계부	144
119	[html5] datalist 사용법 (1)		2022-02-03	호가계부	300
108	[jQuery] 익스플로러 외 날짜 입력박스 사용하기(input type dat... (1)		2019-09-23	호가계부	260687
107	[JavaScript] 스크롤할때 메뉴바 상단에 고정하기 (1)		2019-09-11	호가계부	5796
106	CSS3 미디어쿼리 @media 규칙 이해.		2019-09-09	호가계부	4636
100	Chrome 크롬 강력 새로고침 단축키		2019-07-15	호가계부	24677
99	홈페이지(웹브라우저) 창 가로 세로 확인 방법		2019-07-07	호가계부	24486
97	textarea 엔터키 입력할때마다 입력박스 높이를 증가시키는 자바... (1)		2019-06-19	호가계부	4733
88	CSS 반응형 레이아웃 만들기		2018-07-25	호가계부	55971
74	javascript 에서 window.onload() 와 window::onload() 비교 (2)		2014-07-23	호가계부	6368
73	3DP Chip은 드라이버를 쉽게 찾아주고 3DP Net은는 랜카드통합 �...		2014-07-16	호가계부	11469
71	javascript로 HTML5 에서 재공하는 Placeholder 기능을 구현한다...		2014-07-03	호가계부	58804
63	HTML과 XHTML의 차이점		2010-11-04	관리자	73652
61	Apache rewrite Module		2010-10-12	아파치	287720
60	alt 나 title의 줄바꿈은 & # 1 3 ;		2010-08-18	관리자	51611
57	정규 표현식		2009-12-14	관리자	16460