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。如果选择了第一个下拉列表中的Damer Elit，则第二个下拉列表应包含：Damer Junior和Elimiering。如果选择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>

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

1 个答案: