Option Group Examples
new TomSelect('#select-gear',{
sortField: 'text'
});<select id="select-gear" multiple placeholder="Select gear...">
<option value="">Select gear...</option>
<optgroup label="Climbing">
<option value="pitons">Pitons</option>
<option value="cams">Cams</option>
<option value="nuts">Nuts</option>
<option value="bolts">Bolts</option>
<option value="stoppers">Stoppers</option>
<option value="sling">Sling</option>
</optgroup>
<optgroup label="Skiing">
<option value="skis">Skis</option>
<option value="skins">Skins</option>
<option value="poles">Poles</option>
</optgroup>
</select>new TomSelect('#select-gear-disabled',{
sortField: 'text'
});<select id="select-gear-disabled" multiple placeholder="Select gear...">
<option value="">Select gear...</option>
<optgroup label="Climbing">
<option value="pitons">Pitons</option>
<option value="cams">Cams</option>
<option value="nuts">Nuts</option>
<option value="bolts">Bolts</option>
<option value="stoppers">Stoppers</option>
<option value="sling">Sling</option>
</optgroup>
<optgroup label="Skiing" disabled>
<option value="skis">Skis</option>
<option value="skins">Skins</option>
<option value="poles">Poles</option>
</optgroup>
</select>new TomSelect('#select-repeated-options',{
sortField: 'text',
hideSelected: false,
duplicates: true,
});<select id="select-repeated-options" multiple>
<option value="">Select...</option>
<optgroup label="Group 1">
<option value="a">Item A</option>
<option value="b">Item B</option>
</optgroup>
<optgroup label="Group 2">
<option value="a">Item A</option>
<option value="b">Item B</option>
</optgroup>
</select>new TomSelect('#select-animal',{
options: [
{class: 'mammal', value: "dog", name: "Dog" },
{class: 'mammal', value: "cat", name: "Cat" },
{class: 'mammal', value: "horse", name: "Horse" },
{class: 'mammal', value: "kangaroo", name: "Kangaroo" },
{class: 'bird', value: 'duck', name: 'Duck'},
{class: 'bird', value: 'chicken', name: 'Chicken'},
{class: 'bird', value: 'ostrich', name: 'Ostrich'},
{class: 'bird', value: 'seagull', name: 'Seagull'},
{class: 'reptile', value: 'snake', name: 'Snake'},
{class: 'reptile', value: 'lizard', name: 'Lizard'},
{class: 'reptile', value: 'alligator', name: 'Alligator'},
{class: 'reptile', value: 'turtle', name: 'Turtle'}
],
optgroups: [
{value: 'mammal', label: 'Mammal', label_scientific: 'Mammalia'},
{value: 'bird', label: 'Bird', label_scientific: 'Aves'},
{value: 'reptile', label: 'Reptile', label_scientific: 'Reptilia'}
],
optgroupField: 'class',
labelField: 'name',
searchField: ['name'],
render: {
optgroup_header: function(data, escape) {
return '<div class="optgroup-header">' + escape(data.label) + ' <span class="scientific">' + escape(data.label_scientific) + '</span></div>';
}
}
});<select id="select-animal" class="demo-animals" placeholder="Select animal..."></select>.demo-animals .scientific {
font-weight: normal;
opacity: 0.3;
margin: 0 0 0 2px;
}
.demo-animals .scientific::before {
content: '(';
}
.demo-animals .scientific::after {
content: ')';
}