How to add placeholder to select2.js

Posted on August 14, 2021August 14, 2021 | by Amardeep Dubey

Post Views: 48

Single select placeholders

&lt;select class="js-example-placeholder-single js-states form-control">
  &lt;option>&lt;/option>
&lt;/select>

$(".js-example-placeholder-single").select2({
    placeholder: "Select a state",
    allowClear: true
});

Multi-select placeholders

&lt;select class="js-example-placeholder-multiple js-states form-control" multiple="multiple">&lt;/select>

$(".js-example-placeholder-multiple").select2({
    placeholder: "Select a state"
});

Using placeholders with AJAX

Select2 supports placeholders for all configurations, including AJAX. You will still need to add in the empty <option> if you are using a single select.

When 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;
  }
});