Question

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

最终结果应与https://select2.github.io/examples.html示例多个选择框类似。

问题：显示下拉列表，但所有选项都是Object对象。

代码

<script>
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.isLoading = false;

  $scope.click = function() {
    $scope.isLoading = true;
    $timeout(function() {
      $scope.isLoading = false;
    }, 2000);
  }
});

</script>

  <style>
    .loadingButton.loading span {
      display: none;
    }

    .loadingButton.loading i {
      display: block;
    }    

    .loadingButton i {
      display: none;
    }
  </style>

  <button type="submit" ng-disabled="isLoading" ng-click="click()" class="loadingButton" ng-class="{'loading': isLoading}">
    <span>Save</span>
    <i class='fa fa-spinner fa-pulse'>icon</i>
  </button>

他们的建议数据格式

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

Answer 1

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

var properArray = [];

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

并传递properArray以选择2个数据

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

2 个答案: