How can I add a jQuery .data() attribute to a dropdownlist option element

Question

I am trying to add some extra data using jQuerys .data() to a element on a dropdownlist, the dropdown list is populating property and the ID I want is there, but when I try and access the data is showing up and undefined.

Population code.

 $.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
            }));
        });
    });

access code

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

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

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

Tadeck · Accepted Answer · 2012-09-12 16:06:22Z

5

You should set data for the element this way (see documentation):

element.data("someKey", someValue);

So your population code could look like this:

$.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);
    });
});

answered Sep 12, 2012 at 16:06

Tadeck

138k28 gold badges155 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TheAlbear Over a year ago

I have changed the population code over but when I go to get the data back it is still showing up and undefined.

Steven Hunt · Accepted Answer · 2012-09-12 16:03:12Z

1

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

I would try using camel case for your data attribute name, since the documentation shows that html 5 is doing some magic behind the scenes when processing the attributes.

answered Sep 12, 2012 at 16:03

Steven Hunt

2,32119 silver badges20 bronze badges

Comments

user430354 · Accepted Answer · 2013-05-10 11:26:38Z

A solution with a modified version of already said approach

Thought its months after you asked the question, still I thought of including it so that it may help other users while they lookup for a similar problem. I happen to bounce on a similar problem recently, and I saw this thread and used the answer by Tadeck to set the data values for a dropdown using jquery.

At first the data values were not beeing set properly as you mentioned as well, but then I twigged the approach and did something (see below) which helped me set/retrieve the data values in jquery.

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

// Here only change is that, instead of doing a element.data(...) I called the element as a jquery dom element using the $ which somehow happen to set the values properly and i can now retrieve the data fields as well!

Hope this might help other users facing similar prolems

Daniel Waghorn · Accepted Answer · 2015-07-09 21:01:51Z

1

No need to split your values, you can simply do.

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

Just add as many fields using data-(any property)

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

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

edited Jul 9, 2015 at 21:01

Daniel Waghorn

2,9852 gold badges22 silver badges34 bronze badges

answered Jul 9, 2015 at 19:41

kush

111 bronze badge

1 Comment

kush Over a year ago

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

TheAlbear · Accepted Answer · 2012-09-13 11:49:08Z

0

So looks from my research that this is not possible the .data() needs to be on a element not on a sub part. So it cant be attached to a <option> element

What I did instead was to include the data within the value field then split it out when the value was accessed.

Set Code

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

Access Code

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

edited Sep 13, 2012 at 11:49

answered Sep 13, 2012 at 9:41

TheAlbear

5,5948 gold badges55 silver badges86 bronze badges

Collectives™ on Stack Overflow

How can I add a jQuery .data() attribute to a dropdownlist option element

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related