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>