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

Я использую подключаемый модуль 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({...});

javascript jquery jquery-select2 jquery-select2-4 select2
person Brett    schedule 29.12.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Уничтожьте 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
});
person Bud Damyanov    schedule 29.12.2016
comment
Ааааа.... Мне понравилась простота атрибутов html5 data-*, сработала прелесть! - person Brett; 29.12.2016

arrow_upward
1
arrow_downward

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

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

person DavidDomain    schedule 29.12.2016
comment
Ок хорошо. Я не знал, что вы можете добавить дополнительные параметры к определенным выборам после того, как они уже были инициализированы. - person Brett; 29.12.2016