如何隐藏 bootstrap-select？

Question

我需要为 Web 应用程序的一部分隐藏 select 语句。我在代码中的某一点说 $("#select1").addClass("hidden");隐藏它。在我决定使用 bootstrap-select 之前，它工作正常。但是自从我添加了 class="selectpicker" 之后，它就不再隐藏了。我可以看到 'hidden' 已使用 Web 检查器添加到 class 语句中，但 select 实际上并未隐藏。我该怎么做？

Answer 1

bootstrap-select 将您的 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');

如何隐藏 bootstrap-select？

How do I hide a bootstrap-select?

css

bootstrap-select