Bootstrap Table

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js"></script>
<table id = "table" data-toggle="table"
       data-query-params="queryParams"
       data-pagination="true"
       data-search="true">
    <thead>
    <tr>
        <th data-field="name">Name</th>
        <th data-field="role">Role</th>
    </tr>
    
    
    </thead>
    <tbody>
      <tr>
        <td >Test</td>
        <td ><select class="form-control defaultpicker">
        <option>Admin</option>
        <option>Normal</option>
        </select></td>
      </tr>
      <tr>
        <td >Henk</td>
        <td ><select class="form-control defaultpicker">
        <option>Admin</option>
        <option>Normal</option>
        </select></td>
      </tr>
      <tr>
        <td >Piet</td>
        <td ><select class="form-control defaultpicker">
        <option>Admin</option>
        <option>Normal</option>
        </select></td>
      </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function(){
		$('.defaultpicker').selectpicker({
      style: 'btn-default',
      size: 4
    });

    $('.infopicker').selectpicker({
      style: 'btn-info',
      size: 4
    });

    $('.warningpicker').selectpicker({
      style: 'btn-warning',
      size: 4
    });

     $('.table-responsive').on('show.bs.select', function () { 
      console.log("triggered show bs select");
      $('.table-responsive').css( "overflow", "hidden" ); 
    }); 
    $('.table-responsive').on('hide.bs.select', function () { 
      console.log("triggered hide bs select");
      $('.table-responsive').css( "overflow", "auto" ); 
    })
});