html datalist 관련 질문입니다. 채택완료

세진컴퓨터랜드 2년 전 조회 1,246

datalist에서 선택한 값을

input에 넣고 싶은데 뭐가 잘못된 걸까요?

그리고 선택한 옵션의 idx값도 저장하고 싶습니다.

</p>

<pre>
<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>






<input type="text" id="list" />
<input type="text" id="idx" />
</pre>

<pre>
<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></pre>

<p>

#datalist

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

정렬:

채택된 답변

+20 포인트

플라이 Expert

2년 전

</p>

<p><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;

       }

    }</p>

<p>}

</script></p>

<p>

이런식으로 처리해 주시면 선택된 값을 가져오실수 있습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

html datalist 관련 질문입니다. 채택완료

답변 1개

공유하기