Clever Geek Handbook

How to hide bootstrap selection?

I need to hide a select statement for a part of a web application. At some 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 class = "selectpicker" it no longer hides when told. I can see that "hidden" has been added to the class statement using the web inspector, but the selection is not hidden. How to do it?

+4


source to share


2 answers


bootstrap-select will convert your select tag to a list of buttons. You must hide

or show

its parent instead of yourself 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 #select1

:



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

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

Please take a look at my JSFiddle .

+5


source


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 hide or show usage

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


source






More articles:


All Articles