JSFiddle - React, Tailwind, and code Playground

HTML

<script basis-config="true" src="https://raw.github.com/lahmatiy/basisjs/master/src/basis.js"></script>

<script id="MySelectTemplate" type="text/basis-template">
  <div>
    <select{field|childNodesElement} event-change="change"/>
    <!--{related}-->
  </div>
</script>

<script id="MySelectItemTemplate" type="text/basis-template">
  <option>
    {title}{hasRelated}
  </option>
</script>

JavaScript

basis.require('basis.ui.field');

var SelectWithRelated = basis.ui.field.Select.subclass({
  template: 'id:MySelectTemplate',
  binding: {
    related: 'satellite:'
  },

  childClass: {
    template: 'id:MySelectItemTemplate',

    valueGetter: 'label',
    titleGetter: function(node){
      return node.label + (node.items && node.items.length ? ' >' : '');
    }
  },

  listen: {
    selection: {
      datasetChanged: function(selection){
        var selected = selection.pick();
        var oldRelated = this.satellite.related;
        var newRelated;

        if (selected && selected.items && selected.items.length)
          newRelated = new SelectWithRelated({
            childNodes: selected.items
          });

        this.setSatellite('related', newRelated);

        if (oldRelated)
          oldRelated.destroy();
      }
    }
  }
});

new SelectWithRelated({
  container: document.body,
  childNodes: [{
            label: '1',
            items: [{
                label: '1 - 1'
            }, {
                label: '1 - 2',
                items: [{
                    label: '1 - 2 - 1'
                }, {
                    label: '1 - 2 - 2',
                    items: [{
                        label: '1 - 2 - 2 - 1',
                    }, {
                        label: '1 - 2 - 2 - 2',
                    }]
                }, {
                    label: '1 - 2 - 3'
                }]
            }]
        }, {
            label: '2',
            items: [{
                label: '2 - 1'
            }, {
                label: '2 - 2'
            }, {
                label: '2 - 3'
            }]
        }]
});