Boostrap-select selectpickerのタイトルを変更できません

Question

Bootstrap select selectpickerのタイトルをプログラムで変更したいと思います。

私は以下のJSコードを試しましたが動作しません。

$('#myPicker') 
    .selectpicker({title: 'New title'}) 
    .selectpicker('render'); 

これ以外の方法はありますか？

Answer 1

DOMが更新された場合Selectpickerにのみ更新します。それはselectpickerが（DOMが変更された）新しいHTMLオブジェクトを追加することができますので、以下の機能は、タイトルを更新する必要があります

function newTitle() { 
    var selectpicker = $("#myPicker"); 
    selectpicker.selectpicker(); 
    selectpicker.selectpicker({title: 'New Title'}).selectpicker('render'); 
    html = ''; 
    selectpicker.html(html); 
    selectpicker.selectpicker("refresh"); 
} 

Answer 2

投稿コードがスニペットで機能するようです。

$(document).ready(function() { 
 
    $('#myPicker2') 
 
    .selectpicker({ 
 
     title: 'New title' 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script> 
 

 
<select id="myPicker1" class="selectpicker" multiple title="Choose one of the following..."> 
 
    <option>Mustard</option> 
 
    <option>Ketchup</option> 
 
    <option>Relish</option> 
 
</select> 
 

 
<select id="myPicker2" class="selectpicker" multiple title="Choose one of the following..."> 
 
    <option>Mustard</option> 
 
    <option>Ketchup</option> 
 
    <option>Relish</option> 
 
</select>