title: Hide table row by dropdown
body: <p>I have 2 dropdown menu (Username &amp; Gender) and I have table with 3 columns (username, name, and gender).<br>
  I want to filter the table based on dropdown value. What must I do ?  </p>
  
  <p>Here's the code :  </p>
  
  <pre><code>&lt;select class="form-control selectpicker"&gt;
      &lt;option value=""&gt;Username&lt;/option&gt;
      &lt;option value=""&gt;user1&lt;/option&gt;
      &lt;option value=""&gt;user2&lt;/option&gt;
      &lt;option value=""&gt;user3&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select class="form-control selectpicker"&gt;
      &lt;option value=""&gt;Gender&lt;/option&gt;
      &lt;option value=""&gt;M&lt;/option&gt;
      &lt;option value=""&gt;F&lt;/option&gt;
  
  &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;table class="dynamicTable tableTools table table-striped table-primary"&gt;
      &lt;!-- Table heading --&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Username&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Gender&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;user1&lt;/td&gt;
              &lt;td&gt;Jane&lt;/td&gt;
              &lt;td&gt;F&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;user2&lt;/td&gt;
              &lt;td&gt;John&lt;/td&gt;
              &lt;td&gt;M&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;user3&lt;/td&gt;
              &lt;td&gt;Jack&lt;/td&gt;
              &lt;td&gt;M&lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;/tbody&gt;
      &lt;!-- // Table body END --&gt;
  &lt;/table&gt;
  &lt;!-- // Table END --&gt;
  </code></pre>