$(document).ready(function() {
$('.js-example-basic-multiple').select2();
$('.js-example-basic-multiple').on('change', function(e) {
let countPlus = $(e.currentTarget).val().length - 3
$('#plusId').remove() // удаляем span с +2.
if (countPlus > 0) { // добавляем span с +2
$('ul.select2-selection__rendered[id="select2-mySelect-container"]')
.append($(`<span id="plusId" class="my-selection-class" >+ ${countPlus}</span>`))
}
})
});
li.select2-selection__choice:nth-child(n + 4) {
/* Т.е. 4-й и дальше */
display: none!important;
}
span#plusId {
color: blue;
margin-left: 5px;
background: rgb(200, 200, 200);
padding: 3px 8px;
border-radius: 5px;
border: 1px solid rgb(150, 150, 150);
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<select id="mySelect" class="js-example-basic-multiple" name="states[]" multiple="multiple" style="width: 100%">
<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>
<optgroup label="Mountain Time Zone ">
<option value="AZ ">Arizona</option>
<option value="CO ">Colorado</option>
<option value="ID ">Idaho</option>
<option value="MT ">Montana</option>
<option value="NE ">Nebraska</option>
<option value="NM ">New Mexico</option>
<option value="ND ">North Dakota</option>
<option value="UT ">Utah</option>
<option value="WY ">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone ">
<option value="AL ">Alabama</option>
<option value="AR ">Arkansas</option>
<option value="IL ">Illinois</option>
<option value="IA ">Iowa</option>
<option value="KS ">Kansas</option>
<option value="KY ">Kentucky</option>
<option value="LA ">Louisiana</option>
<option value="MN ">Minnesota</option>
<option value="MS ">Mississippi</option>
<option value="MO ">Missouri</option>
<option value="OK ">Oklahoma</option>
<option value="SD ">South Dakota</option>
<option value="TX ">Texas</option>
<option value="TN ">Tennessee</option>
<option value="WI ">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone ">
<option value="CT ">Connecticut</option>
<option value="DE ">Delaware</option>
<option value="FL ">Florida</option>
<option value="GA ">Georgia</option>
<option value="IN ">Indiana</option>
<option value="ME ">Maine</option>
<option value="MD ">Maryland</option>
<option value="MA ">Massachusetts</option>
<option value="MI ">Michigan</option>
<option value="NH ">New Hampshire</option>
<option value="NJ ">New Jersey</option>
<option value="NY ">New York</option>
<option value="NC ">North Carolina</option>
<option value="OH ">Ohio</option>
<option value="PA ">Pennsylvania</option>
<option value="RI ">Rhode Island</option>
<option value="SC ">South Carolina</option>
<option value="VT ">Vermont</option>
<option value="VA ">Virginia</option>
<option value="WV ">West Virginia</option>
</optgroup>
</select>
</body>
</html>
Я опишу алгоритм.
1 - Скройте все лишние элементы
li.select2-selection__choice:nth-child(n + 4) { /* Т.е. 4-й и дальше */
display: none!important;
}
2 - Отловите событие change и подсчитайте плюс
$('.js-example-basic-multiple').on('change', function(e){
let countPlus = $(e.currentTarget).val().length-3
console.log(countPlus)
})
3 - добавьте или замените нужный span в зону нужного select2.
$('.js-example-basic-multiple').on('change', function(e){
let countPlus = $(e.currentTarget).val().length-3
$('#plusId').remove() // удаляем span с +2.
if(countPlus>0)
{ // добавляем span с +2
$('ul.select2-selection__rendered[id="select2-mySelect-container"]')
.append($(`<span id="plusId" class="my-selection-class" >+ ${countPlus}</span>`))
}
})
4 - не забудьте стилизовать ваш span
span#plusId {
color: blue;
margin-left: 5px;
background: rgb(200, 200, 200);
padding: 3px 8px;
border-radius: 5px;
border: 1px solid rgb(150, 150, 150);
}
select2 для теста взят с документации