我在ajax all和填充字段后动态创建一个下拉列表。 我也在调用jquery.data()来设置我将来想要的一些属性。
HTML
<input id="test" type="text" list="mylist"/> <datalist id="mylist"></datalist>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
<input id="test" type="text" list="mylist"/> <datalist id="mylist"></datalist>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!
更多推荐
发布评论