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>`))  

    })