时间戳

首页 > 解决方案 > 无法在 select2 中读取 null 的属性“concat”

jquery - 无法在 select2 中读取 null 的属性“concat”

问题描述

我正在尝试使用 select2 获取所有数据，包括父母和孩子的 tp 节目。我找到了一个有用的例子。当我尝试将“children”更改为“childPools”时，出现错误

未捕获的类型错误：无法读取 null 的属性“concat”

 var FRUIT_GROUPS = [
            {
                id: '',
                text: 'Citrus',
                childPools: [
                    { id: 'c1', text: 'Grapefruit' },
                    { id: 'c2', text: 'Orange' },
                    { id: 'c3', text: 'Lemon' },
                    { id: 'c4', text: 'Lime' }
                ]
            },
            {
                id: '',
                text: 'Other',
                childPools: [
                    { id: 'o1', text: 'Apple' },
                    { id: 'o2', text: 'Mango' },
                    { id: 'o3', text: 'Banana' }
                ]
            }
        ];

        $('#fruitSelect').select2({
            multiple: false,
            placeholder: "Select fruits...",
            data: FRUIT_GROUPS,
            query: function (options) {
                var selectedIds = options.element.select2('val');
                var data = jQuery.extend(true, {}, FRUIT_GROUPS);
                var selectableGroups = $.map(data, function (group) {
                    var areAllChildrenSelected = true,
                        parentMatchTerm = false,
                        anyChildMatchTerm = false;
                    if (group.text.toLowerCase().indexOf(options.term.toLowerCase()) >= 0) {
                        parentMatchTerm = true;
                    }
                    var i = group.childPools.length
                    while (i--) {
                        var child = group.childPools[i];

                        if (selectedIds.indexOf(child.id) < 0) {
                            areAllChildrenSelected = false;
                        };

                        if (options.term == '' || (child.text.toLowerCase().indexOf(options.term.toLowerCase()) >= 0)) {
                            anyChildMatchTerm = true;
                        }
                        else if (!parentMatchTerm) {
                            var index = group.childPools.indexOf(child);
                            if (index > -1) {
                                group.childPools.splice(index, 1);
                            };
                        };
                    };

                    return (!areAllChildrenSelected && (parentMatchTerm || anyChildMatchTerm)) ? group : null;
                });

                options.callback({ results: selectableGroups });
            }
        }).on('select2-selecting', function (e) {
            var $select = $(this);
            if (e.val == '') {
                e.preventDefault();
                $select.select2('data', $select.select2('data').concat(e.choice.childPools));
                $select.select2('close');
            }
        });

我在将选择连接到select2('data').

$select.select2('data',$select.select2('data').concat(e.choice.children));

关于这个错误的任何想法？

标签： jqueryjquery-select2concat

解决方案

您在选择父项时遇到的错误是因为您禁用了多项选择，这使 data 属性保留为其默认值，即NULL. 看看文档。它清楚地表明，当您启用多项选择时，数据属性需要一个对象数组。通过调用select2('data')将返回一个表示当前选择的对象的 JavaScript 数组。

此外，您还使用了 childPools 而不是 API 文档不允许的 children。API 期望在传递给 Select2 方法的 JSON 中有以下要求。

何时在部分中生成选项<optgroup>；选项应该嵌套在children每个组对象的键下。组的标签应指定为text组对应数据对象的属性。

Select2 要求每个对象都包含一个id和一个text属性。与数据对象一起传递的其他参数将包含在dataSelect2 公开的对象中。

Select2 仅支持单层嵌套。任何额外的嵌套级别都不能保证在所有浏览器和设备上正确显示。

单击此处阅读有关 Select2 数据源的 API 文档。

推荐阅读