jQuery：如何从所选的datalist(html5)选项中获取特定数据属性的值？

myzjeezk 于 2023-04-11 发布在 jQuery

关注(0)|答案(1)|浏览(250)

联系我们

<input list="items" id="item">

<datalist id="items">
  <option value="A item"  data-xyz = "1" >
  <option value="aa item" data-xyz = "2" >
  <option value="C item"  data-xyz = "3" >
  <option value="D item"  data-xyz = "4" >
  <option value="E item"  data-xyz = "5" >
</datalist> 

<input type="button" id="button" value="Get xyz" />

js：

$("#button").click(function(){
       alert($("#items option:selected").attr('data-xyz'));
});

link to jsbin

查询：

我只需要从选择的datalist选项上点击“#button”或任何事件来访问“data-xyz”的值。

jQuery版本：1.7.2*

谢谢

jquery

来源：https://stackoverflow.com/questions/13322802/jquery-how-to-get-value-of-a-particular-data-attribute-from-selected-datalist

1条答案

按热度按时间

inkz8wg91#

datalist只是一个自动完成的存储器。因为它可以用于页面中的多个元素，所以它没有selected属性。
您需要自己找到适用的选项，如下所示

$("#button").click(function() {
    var val = $('#item').val()
    var xyz = $('#items option').filter(function() {
        return this.value == val;
    }).data('xyz');
    /* if value doesn't match an option, xyz will be undefined*/
    var msg = xyz ? 'xyz=' + xyz : 'No Match';
    alert(msg)

})

DEMO：http://jsfiddle.net/shcRJ/

赞(0）回复(0）举报 2023-04-11

我来回答

jQuery：如何从所选的datalist(html5)选项中获取特定数据属性的值？

1条答案

相关问题

热门标签

最新问答