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>