Javascript 访问数据列表中除值以外的其他参数

我在输入字段上使用数据列表：

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

此值返回xxx或yyy。。。。但是我想返回1或2（选项标记之间的文本）。 我试图提出：

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

---

我怎样才能得到比数据列表选项的值更多的东西呢？

这个值是
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);
  }
});


$（“#案例列表_选择器”）。在（'input'，function（）{
var val=该值；
var$option=$（'#案例_列表_数据选项'）。过滤器（函数（）{
返回此值。值===val；
});
如果（$option.length）{
警报（$option.eq（0.text（））；
}
})；

1.
2.
另一种解决方案可以是：


$（函数（）{
$（“#案例列表_选择器”）。在（'input'，函数（e）上{
var val=该值；
var txt=$（“#案例列表_数据选项[value=“”+val+“]”）。text（）；
警报（'txt:'+txt+'值：'+val）；
});
})；
在替代方案中，可以使用：
$（this.list）.find（'option[value=“”+this.value+'“]”）.text（）
1.
2.

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

$("#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);
  }
});