title: Bootstrap Selectpicker will not reset using built-in functions
body: <p>I have an array of Bootstrap Selectpickers for filtering results from a database. I need a way of resetting all the selectpickers to 'Nothing Selected', this is my code:</p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;
          &lt;label&gt;By Group&lt;/label&gt;
          &lt;select id="groups" name="group" class="form-control selectpicker" multiple&gt;&lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
          etc...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>JS</h1>
  
  <pre><code>ajax_fetch('build_group_options', {groupno:groupno}).done(function(html) {
      //var html is a list of options in html format
      $('#groups').html(html).find('option[value=""]').remove();
      //refresh the selectpicker to make sure options are registered in the picker
      $('.selectpicker').selectpicker('refresh');
  });
  </code></pre>
  
  <p><strong>Try to reset all the pickers:</strong></p>
  
  <pre><code>$('#reset_filters').click(function() {
      $('.selectpicker').selectpicker('deselectAll');
      $('.selectpicker').selectpicker('render');
      $('.selectpicker').selectpicker('refresh');
      $(this).closest('form').find('.selectpicker').each(function() {
          $(this).selectpicker('render');
      });
  });
  </code></pre>
  
  <p>As you can see I have tried all the functions to reset but to no avail so am obviously doing some wrong further up the logic.</p>