jQuery Select2 - get maximum selectable by data attribute

Question

this is html code of my select2 field.

<select data-init-plugin="select2" data-max="4" multiple="" id="mls" name="mls" class="select2 form-control full-width ajax-supported select2-hidden-accessible" data-callback="getAgents" tabindex="-1" aria-hidden="true"></select>

and this is the select2 JavaScript code.

$('.ajax-supported').select2({
                ajax: {
                    dataType: 'json',
                    multiple: true,
                    type: "POST",
                    data: function (term) {
                        return {
                            '_token': $('#_token').val(),
                            name: $(this).attr('name'),
                            callback: $(this).data('callback'),
                            q: term.term,
                        };
                    },
                    url: '{{ url('listing-field-ajax-callback') }}',
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.itemName,
                                    id: item.id
                                }
                            })
                        };
                    },
                },
                minimumInputLength: 1,
                maximumSelectionLength: maximum_selectable_items, // this is where i want 4 from data attribute data-max=4
            });

now i want to get data attribute data-max = 4 and i want to use it in my maximumSelectionLength and want to control the number of selected items. how can i get data attribute from the select HTML and use that in my JavaScript?

Answer 1

well i tried this code and it worked.

$.each($('.ajax-supported'), function(k, field) {
                var max;
                console.log(field);
                if($(field).data('max')) {
                  max =  parseInt($(field).data('max'));
                }
                else {
                    max = 1;
                }
                $(field).select2({
                    ajax: {
                        dataType: 'json',
                        multiple: true,
                        type: "POST",
                        data: function (term) {
                            return {
                                '_token': $('#_token').val(),
                                name: $(field).attr('name'),
                                callback: $(field).data('callback'),
                                q: term.term,
                            };
                        },
                        url: '{{ url('listing-field-ajax-callback') }}',
                        processResults: function (data) {
                            return {
                                results: $.map(data, function (item) {
                                    return {
                                        text: item.itemName,
                                        id: item.id
                                    }
                                })
                            };
                        },
                    },
                    minimumInputLength: 1,
                    maximumSelectionLength: max,
                });
            });