如何隐藏引导选择？答案

【问题标题】：How do I hide a bootstrap-select?如何隐藏引导选择？
【发布时间】：2017-11-14 15:24:23
【问题描述】：

我需要为 Web 应用程序的一部分隐藏一个 select 语句。在代码中的某一时刻，我说 $("#select1").addClass("hidden");隐藏它。直到我决定使用 bootstrap-select 它工作正常。但是自从我添加了 class="selectpicker" 后，它在被告知时不再隐藏。我可以看到“隐藏”已使用 web 检查器添加到类语句中，但选择实际上并未隐藏。我该如何完成这项工作？

【问题讨论】：

使用JSFiddle 之类的网站说明问题的示例将帮助人们回答您的问题。 hide类呢？

标签： css bootstrap-select

【解决方案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。

【讨论】：

我注意到 Select list: 但是并没有隐藏。想法？
如果我们隐藏父 div，<div class="form-group" id="form-group-1"> 中的标签应该被隐藏。我认为您应该与您的代码共享一个有效的 JSFiddle。

【解决方案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');

【讨论】：