如何隐藏bootstrap-select？

Question

我需要隐藏部分Web应用程序的select语句.在代码中的某一点我说$("#select1").addClass("hidden"); 隐藏它.直到我决定使用bootstrap-select它才能正常工作.但是因为我添加了class ="selectpicker",所以当被告​​知时它不再隐藏.我可以看到使用Web检查器将"隐藏"添加到类语句中,但实际上并未隐藏选择.我该如何工作？

Answer 1

bootstrap-select将您的选择标记转换为按钮列表.你应该hide或show它的父亲而不是自己避免css覆盖.例:

<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>

在这种情况下,我们将隐藏或显示#form-group-1而不是#select1:

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

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

请看看我的JSFiddle.

Answer 2

你也可以尝试

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

并隐藏或显示使用

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