javascript - 使用 jQuery 从未知深度的嵌套 JSON 构建级联下拉列表

Question

我正在尝试从嵌套的 JSON 对象动态构建级联下拉列表，该对象可以是任何深度，但在实现上遇到了困难。

来自服务器的 JSON 如下所示:

var data = {
    typ: 'Gren',
    namn: 'Bana',
    items: [{
        typ: 'Disciplin',
        namn: 'Eliminiering',
        items: [{
            typ: 'Klass',
            namn: 'Damer Elit',
            items: []
        }, {
            typ: 'Klass',
            namn: 'Damer Junior',
            items: []
        }]
    }, {
        typ: 'Disciplin',
        namn: 'Poänglopp',
        items: [{
            typ: 'Klass',
            namn: 'Damer Senior',
            items: []
        }, {
            typ: 'Klass',
            namn: 'Flickor 13-14',
            items: []
        }]
    }]
};

因此第一个下拉列表应包含两项:Eliminering 和 Poänglopp。如果在第一个下拉列表中选择了 Elimiering，则第二个下拉列表应包含:Damer Elit 和 Damer Junior。如果选择 Poänglopp，第二个下拉列表应包含:Damer Senior 和 Flickor 13-14。 等等。

如果 items 数组为空，则表示没有子类别，因此无需创建更多下拉菜单。再次强调:数组可以是任何深度。

非常感谢任何如何实现这一点的帮助/想法!

Answer 1

您可以通过递归非常轻松地完成类似的事情。

这是一个粗略的示例。

DEMO

function toggleChildren (e) {
  e.stopPropagation();
  
  var el = $(this);
  el.children('ul').toggle();
}

function buildNests (obj, parent) {
  var item = $('<li />', {
    text: obj.namn,
    on: {
      click: toggleChildren
    }
  }),
  list = $('<ul />', {
    html: [item]
  });
  
  parent.append(list);
  
  if (obj.items.length > 0) {
    obj.items.forEach(function (e) {
      buildNests(e, item);
    });
  }
}

var data = {
    typ: 'Gren',
    namn: 'Bana',
    items: [{
        typ: 'Disciplin',
        namn: 'Eliminiering',
        items: [{
            typ: 'Klass',
            namn: 'Damer Elit',
            items: []
        }, {
            typ: 'Klass',
            namn: 'Damer Junior',
            items: []
        }]
    }, {
        typ: 'Disciplin',
        namn: 'Poänglopp',
        items: [{
            typ: 'Klass',
            namn: 'Damer Senior',
            items: []
        }, {
            typ: 'Klass',
            namn: 'Flickor 13-14',
            items: []
        }]
    }]
};

buildNests(data, $('#con'));

<div id="con"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>