主页 / 问题 / 1239115
Accepted
siberian
Asked:2022-02-02 22:27:31 +0000 UTC2022-02-02 22:27:31 +0000 UTC

选择2 | 超过一定数量时隐藏所选项目

  • 772

Select2与多项选择一起使用，即 用户可以不受限制地选择任意数量的项目。

我该如何做到这一点，以便在选择三个元素时，所有后续的元素（从第四个开始）都隐藏起来并显示隐藏元素的数量？

就像在图片上：

在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    $(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 - 捕捉更改事件并计数加

    $('.js-example-basic-multiple').on('change', function(e){
  let countPlus = $(e.currentTarget).val().length-3
  console.log(countPlus)
})

    3 - 在所需 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#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

相关问题