Question

我需要隐藏部分Web应用程序的select语句。在代码中的某一点，我说$（＆＃34;＃select1＆＃34;）。addClass（＆＃34; hidden＆＃34;）;隐藏它。直到我决定使用bootstrap-select它才能正常工作。但是因为我添加了class =＆＃34; selectpicker＆＃34;被告知时它不再隐藏。我可以看到隐藏的＆＃39;已使用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');

如何隐藏bootstrap-select？

2 个答案: