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

<div class="callback">
  
</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,
    onInitialize: () => displayLog( '初期化 onInitialize' ),
    onFocus: () => displayLog( 'フォーカス onFocus' ),
    onBlur: () => displayLog( 'フォーカス外れ onBlur' ),
    onChange: () => displayLog( '変更 onChange' ),
    onItemAdd: () => displayLog( '選択追加 onItemAdd' ),
    onItemRemove: () => displayLog( '選択削除 onItemRemove' ),
    onDropdownOpen: () => displayLog( 'ドロップダウン開く onDropdownOpen' ),
    onDropdownClose: () => displayLog( 'ドロップダウン閉じる onDropdownClose' ),
  }
)

function displayLog( text ) {
  const callbackContainer = document.querySelector( '.callback' );
  const p = document.createElement( 'p' );
  p.textContent = text;
  callbackContainer.appendChild( p );
}