title: Interactive filter in HTML table multiselect
body: <p>I am creating an HTML table dynamically from JSON objects. I am trying to create a filter for one of the table columns. It works fine but I cannot make it work with a multiselect function. </p>
  
  <p>I tried adding this line:</p>
  
  <pre><code>$('.One1').multiselect();
  </code></pre>
  
  <p>in my script, in different places and it did not work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data = {"headers":["One","Two","Three","Four","Five","Six","Seven","Number1","Number2"],"rows":[["One1","Two1","Three1","Four1","Five1","Six1","Seven1",11,1000],["One1","Two1","Three2","Four1","Five1","Six1","Seven1", 22, 2000],["One2","Two1","Three1","Four2","Five1","Six1","Seven1", 77, 99]]};
  
  
   //////First table - Three1 for Views
   var table1 = '&lt;div class = "filter_box"&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="col-lg-6" style="background-color: #e90649; width: 117px;"&gt;&amp;nbsp;&lt;/div&gt;&lt;div class="col-lg-6" style="max-width: 100px; padding-left: 10px; font-size: 2vw;"&gt;Table&lt;br/&gt;&lt;br/&gt;&lt;span style="font-size: 1vw;"&gt;One1, Three1, Five1&lt;/span&gt;&lt;/div&gt;&lt;div class="col-lg-6"&gt;&lt;div class="container"&gt;&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;One&lt;/th&gt;&lt;th&gt;Two&lt;/th&gt;&lt;th&gt;Three&lt;/th&gt;&lt;th&gt;Four&lt;/th&gt;&lt;th&gt;Five&lt;/th&gt;&lt;th&gt;Six&lt;/th&gt;&lt;th&gt;Seven&lt;/th&gt;&lt;th&gt;Number1&lt;/th&gt;&lt;th&gt;Number2&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;';
   var One = '&lt;div class = "filter"&gt;&lt;select class="One1" data-col="0"&gt;&lt;option value="a"&gt;' + "One" + '&lt;/option&gt;'; 
  
   for (i = 0; i &lt; data.rows.length; i++) 
   {
  
  table1 +="&lt;tr&gt;&lt;td&gt;" + data.rows[i][0] + "&lt;/td&gt;&lt;td&gt;" + data.rows[i][1] + "&lt;/td&gt;&lt;td&gt;" + data.rows[i][2] + "&lt;/td&gt;&lt;td&gt;" + data.rows[i][3] + "&lt;/td&gt;&lt;td&gt;" + data.rows[i][4] + "&lt;/td&gt;&lt;td&gt;" + data.rows[i][5] + "&lt;/td&gt;&lt;td&gt;" + data.rows[i][6] + "&lt;/td&gt;&lt;td&gt;" + data.rows[i][7].toLocaleString() + "&lt;/td&gt;&lt;td&gt;" + data.rows[i][8].toLocaleString() + "&lt;/td&gt;&lt;td&gt;" + "&lt;/td&gt;&lt;/tr&gt;";
    // Interactive filters
  
          One +='&lt;option value="' + i + '"&gt;' + data.rows[i][0] + '&lt;/option&gt;';
    }
  
   table1 += '&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
    One +='&lt;/select&gt;&lt;/div&gt;';  
   $("#one").html(table1);
    $(".filter_box").html(One);
    
    ////First table - Filter
    
    $('.One1').change(function () {
        var values = [];
  
        $('.One1').each(function () {
        
            var colIdx = $(this).data('col');
            
            $(this).find('option:selected').each(function () {
                if ($(this).val() != "") values.push({
                    text: $(this).text(),
                    colId: colIdx
                });
            });
        });
        One1('#one table &gt; tbody &gt; tr', values);
    });
  
    function One1(selector, values) {
        $(selector).each(function () {
            var sel = $(this);
            var txt = sel.find('td:eq(0)').text().trim();
            var hwMatches = values.filter(function(ele, idx) {
                return ele.text == txt;
            }).length;
            sel.toggle(hwMatches &gt; 0 || values.length == 0);
        });
    };
  
                   
   //$('.One1').multiselect();
           </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Roboto');
  
  body, * { 
      margin: 0;
      color:#fff;
      font-family: Roboto; 
      text-transform:capitalize;
      }
  .row {
      display: table;
      width: 100%;
      height: 241px; 
      background-color:#454545;
  }
  .row &gt; .col-lg-6 {
      display: table-cell;
      vertical-align: middle;
  }
  .container {
    /*display: flex;*/
    flex-wrap: wrap;
  }
  .container &gt; div {
    padding: 15px;
    margin: 5px;
    flex: 0 0 calc(100% - 20px);
    text-align: left;
  }
  
  /*img {
      padding-left: 7%;
      max-height:55px;
      width:auto;
  }*/
  td{
    padding: 2px 2px;
    text-align: center;
    margin: 6px 0;
    border: none;
  }
  table{
    width: 100%;
    background-color:#454545;
    font-weight:500;
    border-collapse: separate;
    border-spacing:0.3em 1.1em;
    color: #fff;
    border: 0;
  }
  tr{
      font-size: 1.1em;
  }
  th {
      color: #CCC;
      font-size: 0.7em;
    }
   
  #one,#two,#three,#four{
      padding-top:2%;
    }
    
      .filter
      {
       margin:1px;
          width:20%;
          text-align:center;
          display:inline-block;    
      }
      .filter_box
      {
       text-align:center;
          display:inline-block;
       width:100%;
      }
  
  .filter select, .multiselect dropdown-toggle btn btn-default {
    min-width:120px;
    -webkit-appearance: button;
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background-position: 97% center;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    color: #000;
    font-size: inherit;
    margin: 3px;
    overflow: hidden;
    padding: 1px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /*
  tr th:nth-child(5) {
      background: red;
      display:none;
  } 
  
  tr td:nth-child(5) {
      background: red;
      display:none;
  } 
  */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="one"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>