html:
<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'));
});
查询:
I just need to access the value of 'data-xyz' from selected datalist option on click of "#button" or any event.
jQuery version: 1.7.2
Thanks.
最佳答案
datalist
只是一个用于自动完成的存储。由于它可以用于页面中的多个元素,因此它没有选定的属性。
您需要自己找到适用的选项,如下所示
$("#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)
})
关于jQuery:如何从选定的数据列表(html5)选项中获取特定数据属性的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13322802/