Cannot hide option in bootstrap select

Question

I have this 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>

I'm trying to hide the option with value 3 using this logic:

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

But the option is still there, this is a fiddle.

Answer 1

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

Answer 2

try this sample

 $('#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 3

Use this instead But by @Rory McCrossan is correct

But i will complain more

If you place script on ready this script will run first before selectpicker declared

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

then try put it Later-Run

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

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

This is solution if you script later

... Thx from another answer

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

The problem is because you're calling refresh() on the option, not the select. Try this:

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

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