Diogo Wernik Diogo Wernik - 2 months ago 4
Javascript Question

In a select2, how can i personalise maximumSelectionLength message

I have a select2 field in my form:

In my javascript file i set its maximum lenght to 3 tags:

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


When i get 3 tags, it shows me a message:

You can only select 3 items


I would like to change that for:

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


How can i achieve that?

Here is my 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>





The message html is:

<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

Option 1: Include your own translations by passing plugin options. Something like the code below:

$('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';
        }
    }
});
Select 2 Documentation - Internationalization (Language support)


Option 2: Include language file (select2 offers over 40 built-in languages) https://github.com/select2/select2/tree/master/src/js/select2/i18n - You can edit them and adjust for your needs.