선택한 datalist 에 data() 값을 가져오고 싶습니다.
본문
선택한 요소의 data-num 값을 가져오고 싶습니다.
jquery로 어떻게 해야 하나요?
$('body')on('change', function(){
});
를 사용하면 되나요?
아니면 어던 방법이 있을까요?
<input type="text" list="depList">
<datalist id="depList">
<option value="강백호" data-num="10"></option>
<option value="서태웅" data-num="11">/option>
<option value="정대만" data-num="14"></option
</datalist>
답변 4
<style>
.wrap {
width: 100%;
position: fixed;
bottom: 1em;
text-align: center;
}
</style>
<div class="wrap">
<input type="text" list="depList" id="depSelect">
<datalist id="depList">
<option value="강백호" data-num="10"></option>
<option value="서태웅" data-num="11"></option>
<option value="정대만" data-num="14"></option>
</datalist>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
function get_datalist_opt_attr(obj, attr, val) {
var rtn = null;
if ($(obj).length == 1) {
$(obj).children().each(function (idx, opt) {
if ($(opt).val() == val) {
rtn = $(opt).attr(attr);
return false;
}
});
}
return rtn;
}
$('#depSelect').bind('input', function(evt) {
var el = evt.target;
var dlist = $('#' + $(el).attr('list'));
var attr = get_datalist_opt_attr(dlist, 'data-num', el.value);
console.log(el.value + ' : ' + attr);
});
</script>
$("#depList option").find(':selected').data('data-value'); 로 해보세요.
$('#depList').change(function(){
console.log($(this).attr('data-num')) // 선택한값
})
<input type="text" list="depList" onchange="alert(this.value)">
답변을 작성하시기 전에 로그인 해주세요.