在select2中,我如何个性化maximumSelectionLength消息

Question

我的表单中有一个select2字段:

在我的javascript文件中,我将其最大长度设置为3个标签:

$('#card_tag_location').select2({
    placeholder: 'Quais Bairros atua',
    theme: 'bootstrap',
    maximumSelectionLength: 3
});

当我得到3个标签时,它会显示一条消息:

You can only select 3 items

我想改变它:

You can only select 3 items - Upgrade Now and Select More

我怎样才能实现这一目标？

这是我的HTML:

**// Field html**
<p>
  <input name="card[tag_location][]" type="hidden" value="">
  <select class="form-control pre_selected select2-hidden-accessible" multiple="" name="card[tag_location][]" id="card_tag_location" tabindex="-1" aria-hidden="true">
    <option value="">Escolha uma opção</option>
    <option selected="selected" value="Asa Norte">Asa norte</option>
    <option value="Lago Norte">Lago norte</option>
    <option selected="selected" value="Asa Sul">Asa sul</option>
    <option value="Lago Sul">Lago sul</option>
    <option value="Taguatinga">Taguatinga</option>
    <option value="Guará">Guará</option>
    <option value="Vila Planalto">Vila planalto</option>
  </select>
  <span class="select2 select2-container select2-container--bootstrap select2-container--focus select2-container--below select2-container--open" dir="ltr" style="width: 533px;">
    <span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="-1" aria-owns="select2-card_tag_location-results"><ul class="select2-selection__rendered"><li class="select2-selection__choice" title="Asa norte"><span class="select2-selection__choice__remove" role="presentation">×</span>Asa norte</li>
  <li class="select2-selection__choice" title="Asa sul">
    <span class="select2-selection__choice__remove" role="presentation">×</span>Asa sul</li>
  <li class="select2-search select2-search--inline">
    <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;">
  </li>
  </ul>
  </span>
  </span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</p>

**// Message html**
<span class="select2-container select2-container--bootstrap select2-container--open" style="position: absolute; top: 302.142px; left: 1015.14px;">
  <span class="select2-dropdown select2-dropdown--below" dir="ltr" style="width: 533px;">
    <span class="select2-results">
      <ul class="select2-results__options" role="tree" aria-multiselectable="true" id="select2-card_tag_location-results" aria-expanded="true" aria-hidden="false">
        <li role="treeitem" aria-live="assertive" class="select2-results__option select2-results__message">You can select only 3 itens</li>
      </ul>
    </span>
  </span>
</span>

消息html是:

<ul class="select2-results__options" role="tree" aria-multiselectable="true" id="select2-card_tag_location-results" aria-expanded="true" aria-hidden="false">
   <li role="treeitem" aria-live="assertive" class="select2-results__option select2-results__message">
     You can select only 3 itens
   </li>
</ul>

Answer 1

选项1: 通过传递插件选项包含您自己的翻译.类似下面的代码:

$('select').select2({
    maximumSelectionLength: 3,
    language: {
        // You can find all of the options in the language files provided in the
        // build. They all must be functions that return the string that should be
        // displayed.
        maximumSelected: function (e) {
            var t = "You can only select " + e.maximum + " item";
            e.maximum != 1 && (t += "s");
            return t + ' - Upgrade Now and Select More';
        }
    }
});

选择2个文档 - 国际化(语言支持)

选项2:包含语言文件(select2提供40多种内置语言) https://github.com/select2/select2/tree/master/src/js/select2/i18n - 您可以编辑它们并根据您的需要进行调整.