2

Используется select2 с множественным выбором (multiple), т.е. пользователь может выбрать сколько угодно пунктов без ограничения.

Как сделать чтобы при выборе более чем, например, трех элементов, все последующие, начиная с четвертого, скрывались и выводилось число скрытых элементов?

Как на картинке:

введите сюда описание изображения

1 ответ 1

2

$(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 для теста взят с документации

2
  • спасибо большое
    – siberian
    3 фев 2021 в 5:22
  • @voronam, Вам спасибо, было интересно реализовать 3 фев 2021 в 13:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.