javascript - 无法在引导选择中隐藏选项

Question

我有这个select：

<select id="terms" class="selectpicker" data-style="btn btn-primary btn-round">
    <option value="">choose an option</option>
    <option value="1">Hello</option>
    <option value="2">World</option>
    <option value="3">Foo</option>
</select>

我正在尝试3使用以下逻辑隐藏具有值的选项：

 $('#terms option[value="3"]').hide().selectpicker('refresh');

但是选项仍然存在，这是一个小提琴。

标签： javascriptjquerybootstrap-select

Answer 1

问题是因为您调用refresh()的是option，而不是select. 试试这个：

$(document).ready(function() {
  $('#terms option[value="3"]').hide();
  $('#terms').selectpicker('refresh');
});

div {
  padding-left: 100px;
  padding-top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div>
  <select id="terms" class="selectpicker" data-style="btn btn-primary btn-round">
    <option value="">choose an option</option>
    <option value="1">Hello</option>
    <option value="2">World</option>
    <option value="3">Foo</option>
  </select>
</div>