Предоставление различных опций для выбора элементов одним вызовом при использовании select2

Question

Я использую плагин jQuery select2 (V4), и я вызываю его на все мои селекты, такие как:

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

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

Тем не менее, при определенных выборках я хотел бы добавить дополнительные параметры, если, например, они находятся внутри определенного родительского элемента.

Возможно ли это, или мне придется уничтожить соответствующие элементы выбора, а затем применить их снова с новыми параметрами, такими как:

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

Answer 1

Уничтожить select и затем повторно инициализировать его с новыми параметрами (также вы можете выполнить так называемое "сцепление"):

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

Вы также можете определить параметры конфигурации с помощью HTML5 data-* атрибуты, которые будут переопределять любые параметры, установленные при инициализации Select2 и любые значения по умолчанию.

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

Приведенный выше код эквивалентен:

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

Answer 2

Вы также можете просто установить параметры выбора по умолчанию с помощью:

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

Эти параметры будут установлены для всех выпадающих списков.

Всякий раз, когда вы хотите, чтобы один выпадающий список имел параметры, отличные от значений по умолчанию, просто введите их.

Вот пример:

$.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>