达到select2 select的数据属性

Question

Is there a way to reach a data-attribute from within a select2?

$('select').select2({
  ajax: {
    url: url + '&id=' + $(this).attr('data-id')
    //...
  }
});
//...
<select data-id="1"></select>
<select data-id="2"></select>
<select data-id="3"></select>

Answer 1

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.

Answer 2

Reading the document, it says that you can insert the url as a data-type in html select tag like so:

<select data-ajax--url="YOUR DESIRED URL" data-ajax--cache="true">
    ...
</select>

This url will override the options you have set inside of the function when calling, thus using a different one for each option you set it to in html.