Предоставление различных вариантов для выбора элементов с одного вызова при использовании ВЫБ.2

Question

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

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

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

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

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

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

Answer 1

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

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

Вы можете также определить параметры конфигурации , используя HTML5data-* атрибуты, которые будут переопределять любые параметры, установленные при инициализации 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

Вы также можете просто установить ВЫБ.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>