javascript - jQuery Select2 - 通过数据属性获取最大可选值

Question

这是我的 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 中使用它？

Answer 1

嗯，我尝试了这段代码，它有效。

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