Доступ к другим параметрам, чем значение в DataList

Question

я использую DataList на поле ввода:

<input list='cases_list_data' id='caseList_selector'/> 
<datalist id='cases_list_data'> 
    <option value='xxx'>1</option> 
    <option value='yyy'>2</option> 
</datalist> 

Я привязать к нему событие ввода:

$("#caseList_selector").on('input', function() { 
    var val = this.value; 
    if($('#cases_list_data option').filter(function(){ 
    return this.value === val;   
    }).length) { 
    alert(this.value); 
    } 
}); 

this.value возвращает ххх или YYY. . ... но я хотел бы вернуться 1 или 2 (текст между тегами опционных я пытался поставить:

<option data-id='1' value='xxx'>1</option> 

Но оба foloowing пытается вернуть неопределенным:

$('option:selected', this).data('id') 
$(this).data('id'); 

Как я мог бы получить нечто большее, чем только стоимость DataList варианты?

Answer 1

this.value является значение атрибута select тега value, так, чтобы получить текст выбранного

$("#caseList_selector").on('input', function() { 
    var val = this.value; 
    var text = ""; 
    if($('#cases_list_data option').filter(function(){ 
    if(this.value === val) 
    { 
     text = $(this).text(); 
     return true; 
    } 
    return false;   
    }).length) { 
    alert(text); 
    } 
}); 

Answer 2

$("#caseList_selector").on('input', function() { 
 
     var val = this.value; 
 
     var $option = $('#cases_list_data option').filter(function(){ 
 
      return this.value === val; 
 
     }); 
 
     
 
     if ($option.length) { 
 
      alert($option.eq(0).text()); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input list='cases_list_data' id='caseList_selector'/> 
 
<datalist id='cases_list_data'> 
 
    <option value='xxx'>1</option> 
 
    <option value='yyy'>2</option> 
 
</datalist>

Answer 3

Другим решением может быть:

$(function() { 
 
    $("#caseList_selector").on('input', function (e) { 
 
    var val = this.value; 
 
    var txt = $('#cases_list_data option[value="' + val + '"]').text(); 
 
    alert('txt: ' + txt + ' value: ' + val); 
 
    }); 
 
});

In alternative it's possible to use: 
 

 
<pre> 
 
$(this.list).find('option[value="' + this.value + '"]').text() 
 
</pre> 
 

 
<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 

 
<input list='cases_list_data' id='caseList_selector'/> 
 
<datalist id='cases_list_data'> 
 
    <option value='xxx'>1</option> 
 
    <option value='yyy'>2</option> 
 
</datalist>