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

Question

这是我的 datalist items with data-value attribute。我想获取数据属性 on change.

的值

 <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 attribute value 。请帮帮我。

Answer 1

您可以使用 data('value') 或 attr('data-value')

Answer 2

更改您的代码

来自

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

});

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

how to get the value of data-value attr of selected datalist item

jquery

datalist