jquery - 如何获取所选数据列表项的数据值属性的值

Question

这是我的具有数据值属性的数据列表项。我想获取数据属性变化时的值。

 <div class="col-md-3 "> 
  <input type="text" class="form-control" list="items" id="proname" placeholder="Product Name" style="margin-left: 12px;"> 
  <datalist id="items">
    <option data-value="120.0">
      Chicken Biryani() 57
    </option>
    <option data-value="100.0">
      chiken manchuriya() 58
    </option>
  </datalist>
</div>

我想获取 #proname 更改时的 attr 值

我尝试了下面的代码

$(document).ready(function() {
  $("#proname").change(function(){
    var proName=$("#proname").val();

    alert($("#proname option").find(':selected').data('data-value'));//out-put : undefined
  });
});

我如何获取data-value属性值。请帮帮我。

Answer 1

更改您的代码

来自

$(document).ready(function() {
    $("#proname").change(function(){
        var proName=$("#proname").val();

        alert($("#proname option").find(':selected').data('data-value'));//out-put : undefined

    });
});

至

$("#proname").change(function(){

  var proName=$("#proname").val();
   var value = $('#items option').filter(function() {
     return this.value == proName;
   }).data('value');
  var msg = value ? value : 'No Match';

alert(msg);

});