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

Question

我正在 ajax 之后动态创建一个下拉列表并填充字段。我也在调用 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属性，所以看来你必须filteroptions 用于选择 可能的 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

演示：https://jsfiddle.net/erkaner/9yb6km6a/21/

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

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

Answer 3

使用数据列表时，将其视为用户的建议列表。用户可以输入 he/she 想要的任何内容。选项元素与存储在文本框中的实际 selected 值无关。如果您必须使用数据列表，则在文本框上使用事件并根据值使用 select 选项。类似于：

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

这会获取文本框值并找到关联的数据列表选项。但是，如果我输入一些随机的乱码，它不会也不能工作，因为不存在相应的选项。另一种方法是使用 select 强制用户选择列表中的选项之一。

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

基本上现在我们可以做：

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

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

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

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

jquery get data attributes from dynamically generated options

html

javascript

jquery