Get Custom Data-Attribute in Select2 with <Select>

Get custom data-attribute in select2 with select

There is no direct method with select2, you can use a combination of select2 data and jQuery like following :

$("#example").select2().find(":selected").data("id");

First you get the select2 data then you find your selected option with jQuery and finally the data-attribute.

How to get custom data-attribute of select2 selected values

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

jquery get data attributes of select2 inside while loop php

Your code is so weird for me.
Try this:

  $('select').on('change', function() {
    var status=$(this).find(":selected").data("status");
    $('#status').val(status);
  });

Adding data- attributes with select2

This solution applies to Select2 versions 4.0 or higher.

Assuming the attributes your talking about are loaded in the array you are returning in processResults. For example, if you are selecting a record like ('id':1,'text':'some-text','custom_attribute':'hello world')

Then on a change event you can do:

data=$("#selector").select2('data')[0];
console.log(data.custom_attribute);//displays hello world

Hope it helps..

select2 set option attributes manually for each option

Try like this inside foreach loop, and set the trigger after that.

var data = {
id: challn.MaterialSheet_ID,
text: challn.Challan_No
};

var newOption = new Option(data.text, data.id, false, false);
$('#txtSelectChallan').append(newOption).trigger('change');

Check this link for further solution on custom attributes

Or Simply you can do like this in a loop for the result set
var option = "<option value="+challn.MaterialSheet_ID+" amount="+challn.Total_Amount+">"+challn.Challan_No+"</option>

This is what Select2 Official Site has to say about custom-data-fields

$('#mySelect2').select2({
// ...
templateSelection: function (data, container) {
// Add custom attributes to the <option> tag for the selected option
$(data.element).attr('data-custom-attribute', data.customValue);
return data.text;
}
});

// Retrieve custom attribute value of the first selected element
$('#mySelect2').find(':selected').data('custom-attribute');

Click here for the above reference link

Reach data-attribute of select2 select

To pass a custom param to your ajax url in select2, you should use the data ajax function:

$('select').select2({
  ajax: {
    url: "zee/base/url" // base url, no params
    data: function(params) {
      return {
        q: params.term,          // search term
        id: $(this).data('id')   // ta daaaa!
        page: params.page
      };
    },

    // moar ajax options
  },

  // moar select2 config options
})

As a general note, this inside select2 config options refers to the select2 instance (which is an object) and this inside the data function outlined above refers to the DOM element select2 was called upon, hence the jQuery wrapper$(this) has a .data() method.

---

Related Topics