Dropdown Header

new TomSelect('#select-code-language',{
sortField: 'text',
hideSelected: false,
plugins: {
'dropdown_header': {
title: 'Language'
}
}
});
<select id="select-code-language" class="demo-code-language" placeholder="Select a language..." autocomplete="off">
<option value="txt">Text</option>
<option value="md">Markdown</option>
<option value="html">HTML</option>
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="java">Java</option>
<option value="js" selected>JavaScript</option>
<option value="c#">Ruby</option>
<option value="c#">VHDL</option>
<option value="c#">Verilog</option>
<option value="c#">C#</option>
<option value="c++">C/C++</option>
</select>

Plugin Configuration

Setting Description
html

An html string used to generate the header

Type: callback Default:
function(data){
return `<div class="${data.headerClass}">
<div class="
${data.titleRowClass}">
<span class="
${data.labelClass}">${data.title}</span>
<a class="
${data.closeClass}">&times;</a>
</div>
</div>
`
;
}
title

The text of the header

Type: string Default: Untitled
headerClass

The CSS class name of the header

Type: string Default: dropdown-header
titleRowClass

The CSS class name of the dropdown header title

Type: string Default: dropdown-header-title
labelClass

The CSS class name of the dropdown header label row

Type: string Default: dropdown-header-label
closeClass

The CSS class name of the dropdown header close button

Type: string Default: dropdown-header-close

Available Plugins