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

您还可以使用以下命令设置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

2 个答案: