twitter-bootstrap 使用 jquery 或 javascript 使用引导程序动态更改选择选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17298258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jquery or javascript to dynamically change select options using bootstrap?
提问by kchow23
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:
我正在尝试动态更改使用 bootstrap 中的 selectpicker 的选择选项。它似乎不适用于 bootstrap，但没有它，它工作得很好。
这是我的代码：
HTML
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
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
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 文件中定义的任务加载一组选项。例如，如果我单击项目 2，它应该在任务选项中加载任务 4 和任务 5。如果我删除选择器，这确实有效，但是有没有办法可以保留选择器并同时执行此操作？
Thanks for the help.
谢谢您的帮助。
回答by Abel Pastur
From the bootstrap-select website:
从引导选择网站：
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 以编程方式更新选择，首先操作选择，然后使用刷新方法更新 UI 以匹配新状态。在删除或添加选项时，或者通过 JavaScript 禁用/启用选择时，这是必要的。
$('.selectpicker').selectpicker('refresh');
回答by Errr
TypeError: $(...).selectpicker is not a function
$('.def_lang').selectpicker('refresh')
回答by Aymen Bouhastine
TypeError: $(...).selectpicker is not a function
TypeError: $(...).selectpicker 不是函数
$('.list_doc').selectpicker('refresh');
$('.list_doc').selectpicker('refresh');
