JS - Column Filter

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
<link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<select id="dropdown" multiple="multiple" style="display: none;">
  <optgroup label="Cities">
    <option value="Edinburgh">Edinburgh</option>
    <option value="Lisbon">Lisbon</option>
    <option value="London">London</option>
    <option value="Paris">Paris</option>
    <option value="(Paris) France">(Paris) France</option>
    <option value="Tokyo">Tokyo</option>
  </optgroup>
</select>

<table id="table" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>London</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Paris</td>
    </tr>
    <tr>
      <td>ABC XYZ</td>
      <td>(Paris) France</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Lisbon</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Edinburgh</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Tokyo</td>
    </tr>

  </tbody>
</table>

CSS

#table_filter {
  display: none;
}

JavaScript

$(document).ready(function() {

  // Setup table

  $('#table').DataTable({
    responsive: true,
    paginate: false,
    info: false
  });

  // Setup dropdown

  $('#dropdown').multiselect({
    onChange: function(element, checked) {

      var cities = $('#dropdown option:selected');

      var selected = [];
      $(cities).each(function(index, city) {
        selected.push(['^(' + $(this).val().replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') +')$']);
      });

      var regex = selected.join("|");
      console.log(regex);
      $('#table').DataTable().column(1).search(
        regex, true, false
      ).draw();
    }
  });
});