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返回xxx或yyy ....但我想返回1或2（选项标签之间的文本。我试着说：

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

但是两个以下的尝试都返回undefined：

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

我怎么能获得的不仅仅是datalist选项的值？

Answer 1

this.value是value标记的select属性的值，因此要获取所选

的文本

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

另一种解决方案可以是：

＆＃13;

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

＆＃13;

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>

＆＃13;

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

3 个答案: