使用 select2 时，一次调用即可为 select 元素提供不同的选项

Question

我正在使用 jQuery 插件 select2 (V4)，我在所有 select 上调用它，例如:

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

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

但是，在某些 select 上，我想添加额外的选项，例如，如果它们位于某个父元素内。

这可能吗，还是我必须销毁相应的 select 元素，然后使用新选项再次应用它们，例如：

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

Answer 1

销毁select然后用新参数重新初始化它（你也可以执行所谓的"chaining"）：

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

您还可以使用 HTML5 data-* 属性定义您的配置选项 ，这将覆盖 any 初始化时设置的选项 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>

使用 select2 时，一次调用即可为 select 元素提供不同的选项

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

javascript

jquery

jquery-select2

jquery-select2-4

select2