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