始终显示占位符 select2
Always display placeholder select2
我想构建一个显示“选中一个或多个选项”占位符的选择器,并且在选择 1-N 个选项后,仍然显示占位符而不是选中的结果。
简而言之,组件应始终显示占位符,无论是否选中了 0、1 或 N 选项。
我一直在寻找,但找不到任何方法:
Html:
<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
Js
$('select').select2({
placeholder: "Select a state",
templateSelection: function (data) {
return 'Select a state';
}
});
最后,我选择覆盖结果模板并插入所需的文本。
// Set the default option.
$(select, context).each(function (e) {
setTemplateResults($(this));
});
// Override select2 default work flow.
$(select, context).on('select2:select select2:unselect', function (evt) {
setTemplateResults($(this));
});
// Method.
function setTemplateResults(selector) {
let container = selector.siblings('span.select2').find('ul')
container.html('<li>' + Drupal.t('Select category(ies)') + '</li>');
}
我想构建一个显示“选中一个或多个选项”占位符的选择器,并且在选择 1-N 个选项后,仍然显示占位符而不是选中的结果。
简而言之,组件应始终显示占位符,无论是否选中了 0、1 或 N 选项。
我一直在寻找,但找不到任何方法:
Html:
<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
Js
$('select').select2({
placeholder: "Select a state",
templateSelection: function (data) {
return 'Select a state';
}
});
最后,我选择覆盖结果模板并插入所需的文本。
// Set the default option.
$(select, context).each(function (e) {
setTemplateResults($(this));
});
// Override select2 default work flow.
$(select, context).on('select2:select select2:unselect', function (evt) {
setTemplateResults($(this));
});
// Method.
function setTemplateResults(selector) {
let container = selector.siblings('span.select2').find('ul')
container.html('<li>' + Drupal.t('Select category(ies)') + '</li>');
}