const _list = [{ name: 'a', flag: 'directory', id: '1', parentId: 'head', child: [{ name: 'a-1', flag: 'directory', id: '2', parentId: '1' }, { name: 'a-2', flag: 'directory', id: '3', parentId: '1', child: [{ name: 'index', flag: 'page', id: '4', parentId: '3' }] }, { name: 'a-3', flag: 'directory', id: '5', parentId: '1', child: [{ name: 'index', flag: 'page', id: '6', parentId: '5' }] }] }, { name: 'b', flag: 'directory', id: '7', parentId: 'head', child: [{ name: 'index', flag: 'page', id: '8', parentId: '7' }] }, { name: 'c', flag: 'page', id: '9', parentId: 'head' }] let newList = [] const fn = (arr) => { arr.forEach(item => { if (item.flag === 'page') { newList.push({ id: item.id, name: item.name }) } item.child && item.child.length && fn(item.child) }) } fn(_list) const range = document.createRange(); newList.forEach(item => { document.getElementById('select').append(range.createContextualFragment(``)) })