<div class="wrapper">
  <select data-rich-select multiple>
    <option value="">選択してください</option>
    <optgroup label="フロントエンド">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="javascript">JavaScript</option>
      <option value="typescript">TypeScript</option>
    </optgroup>
    <optgroup label="バックエンド">
      <option value="nodejs">Node JS</option>
      <option value="php">PHP</option>
    </optgroup>
  </select>
</div>

.wrapper {
  margin: 3rem;
}

.callback {
  margin: 3rem;
  padding: 1rem;
  border: 1px dotted #333;
}

.callback p {
  margin: 0 0 .25rem;
}

new TomSelect(
  '[data-rich-select]',
  {
    create: true,
    render: {
      option: function( data, escape ) {
        console.log( data );
        return '<div>' + escape( `test: ${ data.text }  value: ${ data.value }` ) + '</div>';
      }
    }
  }
)