Providing different options to select elements with one call when using select2

Question

I'm using the jQuery plugin select2 (V4) and I am calling it on all my selects such as:

var select2_params = {
    minimumResultsForSearch: Infinity,
    templateResult: applyCategoryClasses,
    templateSelection: applyCategoryClasses,
};

$('select').select2(select2_params);

However, on certain selects I would like to add extra options, if for example they are inside a certain parent element.

Is this possible or would I have to destroy the respective select elements and then apply them again with the new options such as:

$('myParent').find('select').select2('destroy');
$('#myParent').find('select').select2({...});

Answer 1

Destroy the select and then reinitialize it with new parameters (also you can perform so called "chaining"):

 jQuery('#element').find('select').select2('destroy').find('select').select2({/*your new parameters*/});

You can also define your configuration options by using the HTML5 data-* attributes, which will override any options set when initializing Select2 and any defaults.

 <select data-tags="true" data-placeholder="Select an option" data-allow-clear="true"></select>

The above code is equivalent to:

jQuery("select").select2({
  tags: "true",
  placeholder: "Select an option",
  allowClear: true
});

Answer 2

You could also simply set select2 default options with:

$.fn.select2.defaults.set("option", "value");

These options will then be set for all dropdowns.

Whenever you want one dropdown to have different options than the defaults, just pass them in.

Here is an example:

$.fn.select2.defaults.set("maximumSelectionLength", 2)
$.fn.select2.defaults.set("placeholder", "Select only 2 states.")

$('select').select2();

$('select:last').select2({
  "maximumSelectionLength": 1,
  "placeholder": "Select only 1 state.",
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css');

select {
  width: 100%;
}

.select2-container {
  margin: 0 0 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

<select multiple="multiple">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

<select multiple="multiple">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

<select multiple="multiple">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>