jquery从动态生成的选项中获取数据属性(jquery get data attributes from dynamically generated options)

我在ajax all和填充字段后动态创建一个下拉列表。我也在调用jquery.data（）来设置我将来想要的一些属性。

HTML

JS

$(function() { // assume this data is coming from ajax call var data = [{ "name": "John", "id": 1 }, { "name": "Jane", "id": 2 }, { "name": "Judie", "id": 3 }]; var generateDropDown = function(data) { var datalist = $('#mylist'); for (var i = 0; i < data.length; i++) { var value = data[i].name + ' => ' + data[i].id; $('<option>', { 'class': 'myclass' }) .val(value) .data('extra', { 'newid': data[i] * 100 }) .appendTo(datalist); } }; generateDropDown(data); $('.myclass').on('select', function(selected) { console.log($(selected).data('extra')); console.log($(this).data('extra')); }); });

这是JSFiddle

我的要求是从下拉列表中访问所选值以及我添加的数据属性。我怎样才能做到这一点？

我尝试了如上所述的2个console.log选项，但它们不打印任何东西。

I am creating a drop down dynamically after an ajax all and populating the fields. I am also calling jquery.data() to set some attribute which I want in future.

HTML

JS

$(function() { // assume this data is coming from ajax call var data = [{ "name": "John", "id": 1 }, { "name": "Jane", "id": 2 }, { "name": "Judie", "id": 3 }]; var generateDropDown = function(data) { var datalist = $('#mylist'); for (var i = 0; i < data.length; i++) { var value = data[i].name + ' => ' + data[i].id; $('<option>', { 'class': 'myclass' }) .val(value) .data('extra', { 'newid': data[i] * 100 }) .appendTo(datalist); } }; generateDropDown(data); $('.myclass').on('select', function(selected) { console.log($(selected).data('extra')); console.log($(this).data('extra')); }); });

Here is the JSFiddle

My requirement is to access the selected value from drop down along with the data attribute i have added. How can I do that ?

I tried the 2 console.log options as mentioned above but they dont print anything.

最满意答案

与HTMLSelectElement对象相比， HTMLDataListElement对象没有selectedIndex属性，因此您似乎必须filter获取可能选定option 。

$('#test').on('change', function (/* event */) { var val = this.value; var data = $(this.list.options).filter(function() { return this.value === val; }).data('extra'); });

这是一个演示。另请注意， data[i] * 100导致NaN （非数字）值，因为您将对象乘以数字并且没有任何意义！

In comparison to HTMLSelectElement object, HTMLDataListElement object doesn't have selectedIndex property, so it seems you have to filter the options for getting the possible selected option.

$('#test').on('change', function (/* event */) { var val = this.value; var data = $(this.list.options).filter(function() { return this.value === val; }).data('extra'); });

Here is a demo. Also note that data[i] * 100 results in a NaN (Not a Number) value as you are multiplying an object by a number and it doesn't make any sense!

更多推荐