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(`<option value="${item.id}">${item.name}</option>`))
})