使用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-*属性来定义配置选项，该属性将覆盖 with 在初始化 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

您也可以简单地将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>