How do I hide a bootstrap-select?

Question

I need to hide a select statement for part of an web application. At one point in the code I say $("#select1").addClass("hidden"); to hide it. Until I decided to use bootstrap-select it worked fine. But since I added the class="selectpicker" it no longer hides when told to. I can see the 'hidden' has been added to the class statement using web inspector but the select is not actually hidden. How do I make this work?

Answer 1

bootstrap-select convert your select tag to a list of buttons. You should hide or show its parent instead of itself to avoid css override. Example:

<div class="form-group" id="form-group-1">
  <label for="select1">Select list:</label>
  <select class="form-control selectpicker" id="select1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

<button id="btn-hide">Hide select</button>
<button id="btn-show">Show select</button>

In this case we will hide or show #form-group-1 instead of #select1:

$("#btn-hide").click(function(){
  $("#form-group-1").hide();
});

$("#btn-show").click(function(){
  $("#form-group-1").show();
});

Please take a look at my JSFiddle.

Answer 2

You can also try

  <select class="form-control selectpicker" id="your_id">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>

and to hide or show use

$('#your_id').selectpicker('hide');
$('#your_id').selectpicker('show');