How to update bootstrap select (selectpicker) header by javascript

Question

I want to change a select header, I just can't do it.

I tried:

$('select').selectpicker({header: "New Header"}).selectpicker('render');

and:

$('select').selectpicker({header: "New Header"}).selectpicker('refresh');

and I updated to latest version.

Answer 1

Unfortunately, the header is only set when the selectpicker is initialised. Not on refresh, nor on render. So I'm afraid the only option left is to set the header by updating the DOM:

$('select').selectpicker({ header: 'Header' });

function changeHeader() {
  $('.popover-title').contents().filter(function() {
    return this.nodeType === 3;
  })[0].nodeValue = 'New Header';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/js/bootstrap-select.min.js"></script>

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
<button type="button" onclick="changeHeader()">Change header</button>