[JQUERY] datalist 숨겨진 값 저장하기 / datalist data-value

 > JQUERY datalist 숨겨진 값 저장하기 / datalist data-value

 

1. HTML 

<input type="hidden" name="real_value" id="real_value">
<input type="text" list="pet" id="pet_tmp" name="pet_tmp">
<datalist id="pet">
	<option value="강아지" data-value="1"></option>
	<option value="고양이" data-value="2"></option>
	<option value="기타" data-value="3"></option>
</datalist>

숨겨진 값을 저장할 hidden 인풋을 생성해두고

실제로 노출되는 값을 value에, 숨겨놓을 값을 data-value에 작성한다.

 

2. JQUERY

$(document).on('change', 'input', function(){ //모든 input 변경 감지
    var options = $('datalist')[0].options;
    var val = $(this).val(); 
    for (var i=0;i<options.length;i++){ 
		if (options[i].value === val) { //datalist의 option 중 변경된 input의 값과 일치할 때
			var s_value = document.querySelector("#pet_type_dl option[value='" + val + "']").dataset.value;
			$('#pet_type').val(s_value);
          break;
       }
    }
});

선택한 option의 data-value (~.dataset.value) 값을 hidden 인풋에 저장한다.

 

3. 결과

datalist 숨겨진 값 저장하기 /  datalist data-value

고양이를 선택한 경우 hidden 인풋에 value가 2로 저장된 모습이다.

 

※ 사용자가 직접 입력하여 '고양' 등의 완전한 값이 아닌 경우, 저장에 문제가 발생할 수 있다.

 

반응형