Jquery

Question

选择2：https://select2.github.io/

最终结果应该类似于 https://select2.github.io/examples.html 示例多个 select 框。

问题：显示下拉菜单，但所有选项都是 Object object。

代码

$(document).ready(function () {
        function attribute(text) {
            this.text = text;
            this.children = [];
            this.addChild = function (tid, tvalue) {
                var val = { id: tid, text: tvalue };
                this.children.push(val);
            }
        }
        $.get("/products/attributelist", function (data) {
            var attributeList = [];
            $.each(data.AttributeGroups, function (i, val) {
                var tmpAttr = new attribute(val.Name);
                $.each(val.Attributes, function (val1) {
                    tmpAttr.addChild(val1.Id, val1.Name);
                });
                attributeList.push(tmpAttr);
            });
            $(".js-example-basic-multiple").select2({
                data: attributeList
            });
        });
    });

他们建议的数据格式

  {
  text: 'Group label',
  children: [
    {
      id: 'nested-1',
      text: 'First nested option'
    },
    // ... more data objects ...
  ]
}

Answer 1

您将函数列表（属性）推送到 attributeList 数组，因此为了获得正确的格式，您可以：

var properArray = [];

for (var i = 0; i< attributeList.length; i++) {
  properArray.push({text: attributeList[i].text, children: attributeList[i].children})
}

并将 properArray 传递给 select2 数据

Answer 2

试试这个

$(document).ready(function () {
        function attribute(text) {
            return {
                text:text,
                children:[],
                addChild : function (tid, tvalue) {
                    var val = { id: tid, text: tvalue };
                    this.children.push(val);
                }
            }
        }
        $.get("/products/attributelist", function (data) {
            var attributeList = [];
            $.each(data.AttributeGroups, function (i, val) {
                var tmpAttr = attribute(val.Name);
                $.each(val.Attributes, function (val1) {
                    tmpAttr.addChild(val1.Id, val1.Name);
                });
                attributeList.push(tmpAttr);
            });
            $(".js-example-basic-multiple").select2({
                data: attributeList
            });
        });
    });

Jquery - Select2 数组 header 问题

Jquery - Select2 array with header Issue

javascript

select2