Блог

Я добавил 2 выпадающих списка bootstrap multi select на свою HTML-страницу.

#drop1

 <select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm " class="selectpicker w-100" 
  id="drop1" data-actions-box="true">
  <option>Val1</option>
  <option>Val2</option>
  <option>Val3</option>
</select>
  

#drop2

 <select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm " class="selectpicker w-100" 
  id="drop2" data-actions-box="true">
  <option>Val11</option>
  <option>Val22</option>
  <option>Val33</option>
</select>
  

Здесь я установил для ‘data-actions-box’ значение true, чтобы включить опцию Выбрать все и отменить выбор всех в моем выпадающем списке.
Когда я нажимаю на опцию выбрать все, она работает нормально.Я хочу переключить кнопку как выбрать все и отменить выбор всех.

Для реализации указанной вещи мне пришлось добавить следующее событие на мою страницу

 $(".bs-select-all").on('click', function () {

  $(".bs-deselect-all").css({
    "display": "block"
  });
  $(".bs-select-all").css({
    "display": "none"
  });
});
$(".bs-deselect-all").on('click', function () {
  $(".bs-select-all").css({
    "display": "block"
  });
  $(".bs-deselect-all").css({
    "display": "none"
  });
});
  

Здесь bs-select-all — это имя класса кнопки выбрать / отменить выбор всего, используемой в bootstrap multiselect (я нашел его в bootstrap-select.js файл).Но проблема в том, что когда я нажал на кнопку Выбрать все в первом выпадающем списке, обе кнопки выпадающего списка изменились на отмену выбора всех.