SO Example
Example for answer on http://stackoverflow.com/questions/13437446/how-to-display-selected-item-in-bootstrap-button-dropdown-title/22000328?noredirect=1#comment51687750_22000328
by imran44
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<div class="row" id="id_row" >
<select class="selectpicker" multiple data-live-search="true">
<option><label for="id_country_0" input type="checkbox" name="Area" value="US"
id="id_Area_0" onclick="filter_area();">
US</label></option>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
<table class="datatable" id='table_id'>
<thead>
<thead>
<tr>
<th>Region</th>
<th> Area </th>
<th> Country </th>
</tr>
</thead>
<tbody>
<tr>
<td>US</td>
<td>NorthAmerica </td>
<td>US</td>
</tr>
<tr>
<td>UK</td>
<td>England</td>
<td>UK</td>
</tr>
</tbody>
JavaScript
$('select').selectpicker();
// country checkbox
function filter_type() {
//declare variables
var inputs, input, filters, table, tr, td, i, r;
//get all checkbox inputs
inputs = document.querySelectorAll("input[type=checkbox]");
table = document.getElementById("table_id");
tr = table.getElementsByTagName("tr");
//array to hold filters
filters = [];
//loop through inputs and add value for all checked to filters
for (i = 0; i < inputs.length; i++) {
input = inputs[i];
if (input.checked) {
filters.push(input.value);
}
}
//loop through each row in table
for (r = 0; r < tr.length; r++) {
//get column to compare to, in this case the 3rd column
td = tr[r].getElementsByTagName("td")[3];
if (td) {
//get value of the column
txtValue = td.textContent || td.innerText;
//check if column value is the filters array
//or if filters array is empty, show all rows
if (filters.indexOf(txtValue) > -1 || filters.length == 0) {
//true, show row
tr[r].style.display = "";
} else {
//false, hide row
tr[r].style.display = "none";
}
}
}
}