使用 jquery 或 javascript 使用引导程序动态更改选择选项？答案

【问题标题】：Using jquery or javascript to dynamically change select options using bootstrap?使用 jquery 或 javascript 使用引导程序动态更改选择选项？
【发布时间】：2014-11-22 17:13:04
【问题描述】：

我正在尝试从引导程序中动态更改使用 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 并同时执行此操作？

感谢您的帮助。

【问题讨论】：

标签： javascript html xml twitter-bootstrap

【解决方案1】：

来自bootstrap-select website：

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

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

【讨论】：

谢谢！这节省了很多时间
在搜索其他内容时来到这篇文章并找出了我的问题。我一直在努力比较过去 2-3 小时的元素。非常感谢。

【解决方案2】：

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


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

【讨论】：

【解决方案3】：

TypeError: $(...).selectpicker 不是函数

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

【讨论】：

这与@Errr 给出的答案完全相同，除了命令末尾的分号。请不要发布重复的答案。在这种情况下，要么建议对另一个答案进行编辑以修复错字，要么在该答案下方留下评论。