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

})