select2 Archives - scmGalaxy https://www.scmgalaxy.com/tutorials/tag/select2/ A Platform for Software Engineers Sat, 14 Aug 2021 06:49:49 +0000 en-US hourly 1 https://wordpress.org/?v=7.1 How to add placeholder to select2.js https://www.scmgalaxy.com/tutorials/how-to-add-placeholder-to-select2-js/ https://www.scmgalaxy.com/tutorials/how-to-add-placeholder-to-select2-js/#respond Sat, 14 Aug 2021 06:49:46 +0000 https://www.scmgalaxy.com/tutorials/?p=7935 Single select placeholders Multi-select placeholders Using placeholders with AJAX Select2 supports placeholders for all configurations, including AJAX. You will still […]

The post How to add placeholder to select2.js appeared first on scmGalaxy.

]]> Single select placeholders 
<select class="js-example-placeholder-single js-states form-control">
  <option></option>
</select>


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

Multi-select placeholders

<select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></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;
  }
});

The post How to add placeholder to select2.js appeared first on scmGalaxy.

]]> https://www.scmgalaxy.com/tutorials/how-to-add-placeholder-to-select2-js/feed/ 0