> datalist 사용법
datalist가 생소해서 조금 찾아본 결과를 적어둔다.
datalist는 사용자가 입력하는 값과 일치하는 값을 option 목록에서 찾아 보여준다.
자동완성 기능을 제공하는 select 박스와 같다.
option 목록이 아주 많은 경우 유용하게 사용할 수 있다.
사용자가 직접 입력하는 값을 그대로 보존한다.
아래는 기본 코드와 결과다.
<input type="text" list="pet" id="pet_tmp" name="pet_tmp">
<datalist id="pet">
<option value="강아지"></option>
<option value="고양이"></option>
<option value="기타"></option>
</datalist>
datalist 추가 기능에 대해 적어두었다.
datalist change 값 받아오기
https://zpxlcm.tistory.com/entry/JQUERY-datalist-change-값-받아오기
[JQUERY] datalist change 값 받아오기
> JQUERY datalist change 값 받아오기 $(document).on('change', 'input', function(){ var options = $('datalist')[0].options; var val = $(this).val(); for (var i=0;i 출처 : https://stackoverflow.com/..
zpxlcm.tistory.com
datalist 숨겨진 값 저장하기
https://zpxlcm.tistory.com/entry/JQUERY-datalist-숨겨진-값-저장하기
[JQUERY] datalist 숨겨진 값 저장하기 / datalist data-value
> JQUERY datalist 숨겨진 값 저장하기 / datalist data-value 1. HTML 숨겨진 값을 저장할 hidden 인풋을 생성해두고 실제로 노출되는 값을 value에, 숨겨놓을 값을 data-value에 작성한다. 2. JQUERY $(docume..
zpxlcm.tistory.com
'개발하는 '정' > 기타' 카테고리의 다른 글
| IIS 데이터가 올바르지 않습니다. (HRESULT: 0X8007000D) 오류 해결 (0) | 2022.11.15 |
|---|---|
| 엑셀에서 T점수 구하기 (예시파일 有) (0) | 2022.11.10 |
| [html] SELECT 박스 READONLY 처리 (0) | 2022.09.02 |
| [오류 해결] 파일이나 어셈블리 중 하나를 로드할 수 없습니다. 현재 로드한 런타임보다 최신 런타임으로 어셈블리를 빌드했으므로 어셈블리를 로드할 수 없습니다. (0) | 2021.04.16 |
| 그누보드4 cheditor5 이미지 업로드 플래시 제거 (ajax로 대체) (0) | 2021.03.19 |
댓글