Я хочу отфильтровать как одиночные столбцы <select>, так и несколько столбцов <select>в таблице bootstrap

Question

Я пытаюсь включить множественный выбор. js флажок в моей bootstrap -таблице. Одиночные столбцы выбора отлично работают с bootstrap -table-filter-control. js, хотя я застрял в том, как заставить столбец множественного выбора работать вместе со всеми другими столбцами одиночного выбора.

Судя по моему коду, кажется, что множественный выбор все еще рассматривается как один выбор.

мой кодовый блок : https://codepen.io/rayzoray/pen/pojooVo

HTML

<table
  id="table"
  data-toggle="table"
  data-toolbar="#toolbar"
  data-filter-control="true"
  data-show-footer="false"
   data-hide-unused-select-options="true">
  <thead>
    <tr>
      <th data-field="state" data-checkbox="true"></th>
      <th data-field="id" data-filter-control="select">Id</th>
      <th data-field="name" data-filter-control="select">Name</th>
      <th data-field="city" data-filter-control="select">City (multi-select col)</th>
      <th data-field="age" data-filter-control="select">Age</th>
    </tr>
  </thead>
</table>

JS

var data = [{
  "id": "1",
  "name": "Jen",
  "city": "Melbourne",
  "age": "65"
}, {
  "id": "2",
  "name": "Roger",
  "city": "Melbourne",
  "age": "34"
}, {
  "id": "3",
  "name": "Rob",
  "city": "Sydney",
  "age": "23"
}, {
  "id": "4",
  "name": "George",
  "city": "Sydney",
  "age": "45"
}, {
  "id": "5",
  "name": "Fred",
  "city": "Perth",
  "age": "23"
}, {
  "id": "6",
  "name": "Kelly",
  "city": "Melbourne",
  "age": "23"
}, {
  "id": "7",
  "name": "Gina",
  "city": "Perth",
  "age": "25"
}];

$('#table').bootstrapTable({
    data: data,
});

// $('select').multipleSelect()
 $('.bootstrap-table-filter-control-city').multipleSelect({
   selectAll: true,
   keepOpen: false,
   filter: false,
   showClear: false,
 });