How to get custom data-attribute of select2 selected values

Question

I have found similar question with solution here: Get custom data-attribute in select2 with <select>

I have placed custom data attribute with each option.

<option value="pen" data-price="2.5">Pen</option>

When I applied the accepted solution of that question,

var price = $(this).select2().find(':selected').data('price');

I get "Cannot read property 'current' of null".

Here is my fiddle demo

Answer 1

Try this

$('.select-multiple').on('select2:select',function (e) {
   var price = $(e.params.data.element).data('price');
   console.log(price);
});

Fiddle

Answer 2

Your price variable is iterable. You have to iterate all selected options.

Try this:

    $('.select-multiple').change(function () {
      var price = $(this).find(':selected');

      $.each(price, function(){
          console.log('Price: ', $(this).data("price"));
      });
    });

JSFiddle