Select2 supports displaying a placeholder value using the placeholder configuration option. The placeholder value will be displayed until a selection is made.
Text placeholdersThe most common situation is to use a string of text as your placeholder value.
Single select placeholders
For single selects only, in order for the placeholder value to appear, you must he a blank as the first option in your control. This is because the browser tries to select the first option by default. If your first option were non-empty, the browser would display this instead of the placeholder.
Multi-select placeholdersFor multi-selects, you must not he an empty element:
Select2 uses the placeholder attribute on multiple select boxes, which requires IE 10+. You can support it in older versions with the Placeholders.js polyfill.
Default selection placeholdersAlternatively, the value of the placeholder option can be a data object representing a default selection (). In this case the id of the data object should match the value of the corresponding default selection.
$('select').select2({ placeholder: { id: '-1', // the value of the option text: 'Select an option' } });This is useful, for example, when you are using a framework that creates its own placeholder option.
Using placeholders with AJAXSelect2 supports placeholders for all configurations, including AJAX. You will still need to add in the empty if you are using a single select.
Customizing placeholder appearanceWhen using Select2 in single-selection mode, the placeholder option will be passed through the templateSelection callback if specified. You can use some additional logic in this callback to check the id property and apply an alternative transformation to your placeholder option:
$('select').select2({ templateSelection: function (data) { if (data.id === '') { // adjust for custom placeholder values return 'Custom styled placeholder text'; } return data.text; } });When multiple selections are allowed, the placeholder will be displayed using the placeholder attribute on the search box. You can customize the display of this placeholder using CSS, as explained in the following Stack Overflow answer: Change an input's HTML5 placeholder color with CSS.
Placeholders in legacy Internet Explorer versionsSelect2 uses the native placeholder attribute on input boxes for the multiple select, and that attribute is not supported in older versions of Internet Explorer. You need to include Placeholders.js on your page, or use the full build, in order to add placeholder attribute support to input boxes.