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

Question

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

<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 returns xxx 或 yyy .... 但我想 return 1 或 2（选项标签之间的文本。我试着把 :

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

但以下两个尝试 return undefined :

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

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

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>

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

Accessing other parameters than value in a datalist

html

javascript

jquery

datalist