Question

我正在尝试使用jQuerys .data（）向下拉列表中的元素添加一些额外的数据，下拉列表正在填充属性，我想要的ID就在那里，但是当我尝试访问时，数据显示并且未定义。

人口代码。

 $.each(tutorArray, function(index, item){
        var TID= item.T.Id        
        $.each(item.T.TimeList, function(ind, i) {
            $(ddl).append($('<option></option>').val(i.StartTime).html(i.StartTime + ' - ' + i.EndTime).data({
                TID: TID
            }));
        });
    });

访问代码

$(ddl).bind('change', function() {
        if($(this).val() != '') {

            var time = $(this).val(); 

            showConfirmRequestTutorCallDialogue(d, time, $(ddlDurationSelector).val(), $(this).data("TID"), $(ddlStudiesSelector).val())
        }
    });

Answer 1

您应该以这种方式设置data元素（see documentation）：

element.data("someKey", someValue);

所以你的人口代码看起来像这样：

$.each(tutorArray, function(index, item){
    var TID= item.T.Id        
    $.each(item.T.TimeList, function(ind, i) {
        var element = $('<option></option>');
        element.val(i.StartTime).html(i.StartTime + ' - ' + i.EndTime);
        element.data("TID", TID);
        $(ddl).append(element);
    });
});

Answer 2

http://api.jquery.com/data/#data-html5

我会尝试使用camel case作为您的数据属性名称，因为文档显示html 5在处理属性时在幕后做了一些魔术。

Answer 3

具有已修改版本的已解决方法的解决方案

在您提出这个问题之后的几个月，我仍然考虑将其包括在内以便在查找类似问题时帮助其他用户。我最近碰巧遇到了类似的问题，我看到了这个帖子并使用了Tadeck的答案来设置使用jquery的下拉列表的数据值。

首先，正如你所提到的那样，数据值没有正确设置，但随后我对方法进行了细化并做了一些事情（见下文），它帮助我在jquery中设置/检索数据值。

var element = $('<option></option>');  
element.val('id').text('uiName');  
$(element).data("type", 'mytype');

//这里只改变了，而不是做一个element.data（...）我使用$调用元素作为jquery dom元素，以某种方式恰好设置值，我现在可以检索数据领域也是！

希望这可以帮助面临类似问题的其他用户

Answer 4

无需拆分您的值，您可以这样做。

var element = $(' <option data-type1="" data-type2=""></option>');

只需使用数据 - （任何属性）

添加任意数量的字段

设置 - $(element).data("type1", yourValues);

get - $("#dropdownID :selected").data("type1");

Answer 5

从我的研究看起来，这是不可能的.data（）需要在不在子部分上的元素上。所以它不能附加到<option>元素

我所做的是将数据包含在值字段中，然后在访问值时将其拆分。

设置代码

       var element = $('<option></option>');
       element.val(i.StartTime +"--" +TID).html(i.StartTime + ' - ' + i.EndTime);

访问代码

        var str = $(this).val();
        var substr = str.split('--');
        var time = substr[0];
        var TID = substr[1];

如何将jQuery .data（）属性添加到dropdownlist选项元素

5 个答案: