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

Posted 2023-05-07

【中文标题】jQuery Select2 - 通过数据属性获取最大可选

【英文标题】：jQuery Select2 - get maximum selectable by data attribute

【发布时间】：2019-12-23 10:47:08

【问题描述】：

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

【参考方案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,
                );
            );