javascript - jqueryまたはjavascriptを使用して、ブートストラップを使用して選択オプションを動的に変更しますか?

Question

ブートストラップから selectpicker を使用する選択オプションを動的に変更しようとしています。ブートストラップでは機能しないようですが、ブートストラップがなくても問題なく機能します。
これが私のコードです：

HTML

            <select name="proj" id="project" class="selectBox"  style="width:270px" data-size="5" onchange="tasklist()">
                <option>Select Project...</option>
            </select>
        <select name="tsk" class="selectBox" id="task" style="width:270px" data-size="5">
            <option>Select Task...</option>
        </select>

Javascript

$(document).ready(function() {
    $('.selectBox').selectpicker();
});

if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","projectList.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

var project=xmlDoc.getElementsByTagName("project");
for (var i=0;i<project.length;i++)
{
    $('#project').append($('<option>', {
        value: i+"|" + project[i].getElementsByTagName("title")[0].childNodes[0].nodeValue,
        text:project[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
    }));
}

function tasklist()
{
$('#task').empty();
if (window.XMLHttpRequest)
    xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","projectList.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var project=xmlDoc.getElementsByTagName("project");
var x=document.getElementById("project").options.selectedIndex; 
for(var j=0;j<project[x-1].getElementsByTagName("task").length;j++)
{
    $('#task').append($('<option>', {
        value: j+"|" + project[x-1].getElementsByTagName("task")[j].childNodes[0].nodeValue,
        text:project[x].getElementsByTagName("task")[j].childNodes[0].nodeValue
    }));

}
}

XML

<projectlist>
<project>
    <title>Project 1</title>
        <task>task 1</task>
        <task>task 2</task>
        <task>task 3</task>
</project>
<project>
    <title>Project 2</title>
        <task>task 4</task>
        <task>task 5</task>
</project>
<project>
    <title>Project 3</title>
        <task>task 6</task>
        <task>task 7</task>
</project>
</projectlist>

プロジェクトからオプションを選択すると、xml ファイルで定義されているタスクのオプション セットが読み込まれます。たとえば、プロジェクト 2 をクリックすると、タスク 4 とタスク 5 がタスク オプションに読み込まれます。これは selectpicker を削除しても機能しますが、selectpicker を保持しながら同時にこれを行う方法はありますか?

助けてくれてありがとう。

Answer 1

TypeError: $(...).selectpicker は関数ではありません

$('.list_doc').selectpicker('refresh');