javascript - jQuery Select2-通过数据属性获得最大选择

这是我的select2字段的html代码。

<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>

这是select2 JavaScript代码。

$('.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
            });

现在我想获取数据属性data-max = 4，我想在我的maximumSelectionLength中使用它，并希望控制所选项目的数量。如何从选择的HTML获取数据属性并将其用于JavaScript？

最佳答案

好吧，我尝试了这段代码，它的工作。

$.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,
                });
            });