Options Array Examples

The options are created from an array in JavaScript.

new TomSelect('#select-tools',{
	maxItems: null,
	valueField: 'id',
	labelField: 'title',
	searchField: 'title',
	options: [
		{id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'},
		{id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'},
		{id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
	],
	create: false
});
<select id="select-tools" placeholder="Pick a tool..."></select>

Images can be added to option and item elements with custom render templates and data-* attributes

new TomSelect('#data-attr',{
    render: {
        option: function (data, escape) {
            return `<div><img class="me-2" src="${data.src}">${data.text}</div>`;
        },
        item: function (item, escape) {
			return `<div><img class="me-2" src="${item.src}">${item.text}</div>`;
        }
    }
});
<select id="data-attr">
    <option value="chrome" data-src="https://cdn1.iconfinder.com/data/icons/logotypes/32/chrome-32.png">Google Chrome</option>
    <option value="ffox" data-src="https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-32.png">Mozilla Firefox</option>
    <option value="ie" data-src="https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-32.png">Internet Explorer</option>
</select>