如何隐藏bootstrap-select？

Question

我需要隐藏部分web应用程序的select语句。在代码中的某一点上，我使用$(“#select1”).addClass(“隐藏”)；来隐藏它。在我决定使用bootstrap-select之前，它工作得很好。但是自从我添加了class="selectpicker“之后，它就不再隐藏了。我可以看到‘隐藏’已经被添加到使用web检查器的class语句中，但实际上并没有隐藏select。我该怎么做呢？

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');