jQuery DataList 태그에 중첩 선택 - 선택한 항목을 가져올 수 없습니다.

Question

입력 태그에 대해 자동 완성 기능을 구현할 필요가 없습니다.

입력을 시작하면 드롭 다운 목록이 표시되고 항목 중 하나를 선택합니다. 선택한 항목에 도달하려고 할 때 선택한 옵션 대신 옵션 목록에서 첫 번째 옵션을 얻습니다.

이

<input id="chosenTxt" list="someList"> 
    <datalist id="someList"> 
    <select id="selectList"> 
     <option value="First" label="one" /> 
     <option value="Second" label="two" /> 
     <option value="Third" label="three" /> 
    </select> 
    </datalist> 
</input> 

그럼 예를 들어 나는 "두 번째"를 선택하고

$("#selectList option:selected").attr("label") 

나는 "일"을 얻을 사용 : 이것은 모습입니다

.

FYI : jQuery UI에 내장되어 있다는 것을 알고 있지만 사용하고 싶지 않습니다.

Answer 1

당신은 입력 value이 옵션 중 하나의 value 동일한 경우 체크, 입력 요소에 input 이벤트를 수신 이상 옵션을 반복해야합니다.

데이터 목록의 options 속성에서 datalist 요소의 옵션에 액세스 할 수 있습니다.

다음은 예입니다.

$('#chosenTxt').on('input', function() { 
 
    $that = $(this); 
 
    $.each($('#someList')[0].options, function(idx, opt) { 
 
    if($that.val() == opt.value) { 
 
     console.log(opt.label) 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="chosenTxt" list="someList"> 
 
<datalist id="someList"> 
 
<select id="selectList"> 
 
    <option value="First" label="one" /> 
 
    <option value="Second" label="two" /> 
 
    <option value="Third" label="three" /> 
 
</select> 
 
</datalist>