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())
        }
    });

Answer 1

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];