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, path = '') => {  
        arr.forEach(item => {  
            if (item.flag === 'page') {  
                newList.push({  
                    id: item.id,  
                    name: `${path}/${item.name}`
                })  
            }
            item.child && item.child.length && fn(item.child, `${path}/${item.name}`)  
        })  
    }  
    fn(_list)  
    const range = document.createRange();  
    newList.forEach(item => {  
        document.getElementById('select').append(range.createContextualFragment(`<option value="${item.id}" label="${item.name}"></option>`))  
    })