Question

我在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选项，但它们不打印任何内容。

Answer 1

与HTMLSelectElement对象相比，HTMLDataListElement对象没有selectedIndex属性，因此您似乎需要filter options获取可能选择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. 另请注意，data[i] * 100会产生NaN（非数字）值，因为您将对象乘以数字并且它没有任何意义！

Answer 2

使用数据列表时，请将其视为用户建议列表。用户可以输入他/她想要的任何内容。选项元素与存储在文本框中的实际选定值无关。如果必须使用数据列表，则在文本框中使用事件，然后根据值选择该选项。类似的东西：

   $('#test').on('change', function(selected) {
        alert($("#mylist option[value='"+$(this).val()+"']").data('extra'));
    });

这将获取文本框值并查找关联的datalist选项。但是，如果我输入一些随机的乱码，它就不会起作用，因为不存在相应的选项，所以无法工作。另一种方法是使用select来强制用户选择列表中的一个选项。

如果您想要选择，请查看https://jsfiddle.net/tscxyw5m/

基本上现在我们可以做到：

$("#mylist").on('change', function() {
        alert($(this).find("option:selected").data("extra"));
    });

因为现在选项实际上与选择相关联。

另请注意我认为你的意思是： 'newid': data[i].id * 100 不 'newid': data[i] * 100 产生NaN。

Answer 3

DEMO：itertools

当您尝试获取所选项目的值时，您需要搜索页面中的选项并带来与输入字段中的值匹配的选项：

$("#test").bind('input', function () {
    alert($('body')
          .find(
             'option[value*="' + $(this).val() + '"]'
          ).data('extra').newid);
});

jquery从动态生成的选项中获取数据属性

3 个答案: