boottrap-select показать allSelectedText, если выбрать все опции - PullRequest
Новая
       40

boottrap-select показать allSelectedText, если выбрать все опции

0 голосов
/ 27 февраля 2019

Я использую bootstrap-select, чтобы сделать множественный выбор.и я хочу показывать текст «Все выделенные», когда выбрана вся опция в селекторе выбора.

У него есть 7 опций в селекторе выбора, если выбрать все 7 опций, я хочу, чтобы он отображал «Все выбранные» 

$('#selectsearch').selectpicker({
  countSelectedText : "in {0} category selected",
  noneSelectedText : "please select"
});

$('#selectsearch').on('change', function(){
  var thisObj = $(this);
  var isAllSelected = thisObj.find('option[value="All"]').prop('selected');
  var lastAllSelected = $(this).data('all');
  var selectedOptions = (thisObj.val())?thisObj.val():[];
  var allOptionsLength = thisObj.find('option[value!="All"]').length;
  var selectedOptionsLength = selectedOptions.length;

  if(isAllSelected == lastAllSelected){
    if($.inArray("All", selectedOptions) >= 0){
      selectedOptionsLength -= 1;
    }
    if(allOptionsLength <= selectedOptionsLength){
      thisObj.find('option[value="All"]').prop('selected', true).parent().selectpicker('refresh');
      isAllSelected = true;
    }else{       
      thisObj.find('option[value="All"]').prop('selected', false).parent().selectpicker('refresh');
      isAllSelected = false;
    }
  }else{      
    thisObj.find('option').prop('selected', isAllSelected).parent().selectpicker('refresh');
  }
  $(this).data('all', isAllSelected);
}).trigger('change');
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>



<select id="selectsearch" data-width="100%" data-style="form-control shadow-none" multiple data-selected-text-format="count>2" data-all="false" required>
                    <option value="All" selected>All</option>
                    <option value="1st">1st Operator</option>
                    <option value="2nd">2nd Operator</option>
                    <option value="3rd">3rd Operator</option>
                    <option value="4th">4th Operator</option>
                    <option value="5th">5th Operator</option>
                    <option value="6th">6th Operator</option>
                    <option value="7th">7th Operator</option>
                  </select>
...