html datalist 관련 질문입니다.
본문
datalist에서 선택한 값을
input에 넣고 싶은데 뭐가 잘못된 걸까요?
그리고 선택한 옵션의 idx값도 저장하고 싶습니다.
<input type="text" list="datalist" id="inputdatalist" onchange="getDatalist(this.value)">
<datalist id="datalist">
<option value="강백호" data-idx="1">강백호</option>
<option value="서태웅" data-idx="2">서태웅</option>
<option value="정대만" data-idx="3">정대만</option>
<option value="송태섭" data-idx="4">송태섭</option>
<option value="채치수" data-idx="5">채치수</option>
</datalist>
<br>
<br>
<br>
<input type="text" id="list" />
<input type="text" id="idx" />
<script type="text/javascript">
function getDatalist(e){
var thisIdx = $('#inputdatalist option').index($('#inputdatalist option:selected'));
var thisData = $('#inputdatalist option').eq(thisIdx).data('idx');
$('#list').val(thisData);
console.log(thisData);
}
</script>
답변 1
<script type="text/javascript">
function getDatalist(e){
var thisData = $('#inputdatalist').val();
$('#list').val(thisData);
var options = $('datalist')[0].options;
var val = $('#inputdatalist').val();
for (var i=0;i<options.length;i++){
if (options[i].value === val) { //datalist의 option 중 변경된 input의 값과 일치할 때
var s_value = document.querySelector("#datalist option[value='" + val + "']").dataset.idx;
$('#idx').val(s_value);
break;
}
}
}
</script>
이런식으로 처리해 주시면 선택된 값을 가져오실수 있습니다.
답변을 작성하시기 전에 로그인 해주세요.
