Q: Editable select boxes, with HTML5 data Im using the Jeditable plugin...
Jeditable
And I can't seem to make this work properly.
JS FIDDLE TO PLAY WITH IF YOU CAN HELP
Im trying to dynamically load in data into select boxes.
This is what works currently....
   $('.statusedit').editable('{{URL::to("sales/edit")}}',{
    data : '{"APPROVAL":"Approval","COMPLETE":"Completed","CANCELLED":"Cancelled"}',
    type:'select',
    submit:'OK',
        indicator : 'Saving...',
        placeholder:".......",
        callback : function(value, settings) {
          replaceRow($(this).data('id'));
        }
   });

I can do this for all my 7 select boxes, providing 7 different functions for each dropdown, which is currently what Im doing.  And it works just fine.
However....I want to have just one function that pulls the data from the HTML5 data attributes of the links.
This is what I want, but I cant seem to make it work.
  $('.allDropdowns').editable('{{URL::to("sales/edit")}}',{
    data : $(this).data('options'),
    type:'select',
    submit:'OK',
        indicator : 'Saving...',
        placeholder:".......",
        callback : function(value, settings) {
          replaceRow($(this).data('id'));
        }
   });

And the HTML
 Click Here 
<span class='allDropdowns' data-options='{"BLAH":"Blah","DATA":"Moredata"}'> Click Here </span>

<span class='allDropdowns' data-options='{"BLAH":"Blah","DATA":"Moredata"}'> Click Here </span>

You would this this would work, but it doesn`t
Any idea how I can load a data attribute object into the data in a Jeditable select
Thanks
JS FIDDLE TO PLAY WITH IF YOU CAN HELP

A: Ok I answered my own question.
I will post it here in case it will be helpful for anyone in the future.
You just have to pass a function to the data parameter in Jeditable
    data: function(value, settings) {
     var dat = $(this).data( 'options');
     return  dat;
    }

Which will populate the select list correctly.
FIXED ISSUE - JS FIDDLE
