使用jquery或javascript动态更改选择选项使用bootstrap?

I am trying to dynamically change select options which uses selectpicker from bootstrap. It doesn't seem to work with bootstrap but without it, it works just fine.
Here's my code:

我正在尝试动态地改变从引导程序中使用selectpicker的select选项。它似乎不能使用bootstrap，但没有它，它就可以正常工作。这是我的代码:

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>

When I select an option from project, it should load up a set of options for task as defined in the xml file. So for example, if I click Project 2, it should load task 4 and task 5 in the task option. This does work if I remove the selectpicker but is there a way I can keep the selectpicker and do this at the same time?

当我从项目中选择一个选项时，它应该为xml文件中定义的任务加载一组选项。例如，如果我单击Project 2，它应该在task选项中加载task 4和task 5。如果我删除了selectpicker，这确实有用，但是我可以保留selectpicker并同时执行这个操作吗?

Thanks for the help.

谢谢你的帮助。

3 个解决方案

#1

From the bootstrap-select website:

从bootstrap-select网站:

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

要以编程方式使用JavaScript更新select，首先要操作select，然后使用refresh方法更新UI以匹配新的状态。当删除或添加选项，或者通过JavaScript禁用/启用选择时，这是必需的。

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

#2

TypeError: $(...).selectpicker is not a function


$('.def_lang').selectpicker('refresh')

#3

TypeError: $(...).selectpicker is not a function

TypeError:$(…)。selectpicker不是函数

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

$(' .list_doc ').selectpicker(“更新”);

#1