无法在 bootstrap select 中隐藏选项

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

但是选项还在，这是一个fiddle.

Answer 1

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

Answer 2

问题是因为您在 option 而不是 select 上调用 refresh()。试试这个：

$(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>

Answer 3

改用这个但是@Rory McCrossan 的说法是正确的

但我会抱怨更多

如果您将 script 置于就绪此脚本将运行在 selectpicker 声明之前首先

<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">

<script>
  $(document).ready(function() {
    //If you script in header
    $('#terms option[value="3"]').hide();
  });
</script>
<!--Hey: I'm run first!-->

<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>

那就试试以后-运行

like on...listening , jsFiddle(run script later) etc.

will be like this https://jsfiddle.net/qu3g8xr7/

如果您script 稍后

，这就是解决方案

...来自另一个答案的感谢

$('input').click(function() {
  $('#terms option[value="3"]').hide();
});
$('button').click(function() {
  $('#terms option[value="3"]').hide().parent().selectpicker('refresh');
});

<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>
<input type="button" value="hide Foo[Not work]">
<button>hide Foo</button>

Answer 4

试试这个样本

 $('#terms option[value=3]').hide()

<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">


 <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>

Answer 5

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

无法在 bootstrap select 中隐藏选项

Cannot hide option in bootstrap select

javascript

jquery

bootstrap-select