<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 );
}