使用jQuery或JavaScript通过Bootstrap动态更改选择选项？

Question

我可以翻译中文。下面是您需要翻译的内容：

我试图动态更改使用bootstrap selectpicker的选择选项，但似乎无法与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>

当我从项目中选择一个选项时，它应该根据xml文件中定义的任务加载一组任务选项。例如，如果我点击“项目2”，它应该在任务选项中加载任务4和任务5。如果我删除selectpicker，这确实可以工作，但是否有办法同时保留selectpicker并完成此操作呢？

感谢您的帮助。

- kchow23

Answer 1

从 bootstrap-select 网站：

要使用 JavaScript 编程方式更新 select，首先操作 select，然后使用 refresh 方法将 UI 更新为与新状态相匹配。当使用 JavaScript 删除或添加选项，或禁用/启用 select 时，需要这样做。

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

- Abel Pastur

---

谢谢！那节省了很多时间。 - kchow23

在搜索其他内容时，我偶然看到了这篇文章，并解决了我的问题。我已经挣扎了2-3个小时，一直在比较元素。非常感谢。 - mdev

Answer 2

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


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

- Errr

Answer 3

类型错误：$(...).selectpicker 不是一个函数

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

- Aymen Bouhastine

---

这与@Errr给出的答案完全相同，只是命令末尾的分号不同。请勿发布重复的答案。在这种情况下，请建议对其他答案进行编辑以修复拼写错误，或在该答案下留下评论。 - honk