Dropdown Header

Example

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}">×</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`

Plugin Configuration

Available Plugins