![](/img/trans.png)
[英]Change bootstrap multiselect values based on another select options, using jquery
[英]Using jquery or javascript to dynamically change select options using bootstrap?
我正在嘗試動態更改使用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文件中定義的任務加載一組選項。 例如,如果我單擊Project 2,它應該在任務選項中加載任務4和任務5。 如果我刪除了selectpicker,這確實有效,但有沒有辦法可以保留selectpicker並同時執行此操作?
謝謝您的幫助。
要以編程方式使用JavaScript更新選擇,請先操作select,然后使用refresh方法更新UI以匹配新狀態。 在刪除或添加選項時,或通過JavaScript禁用/啟用選擇時,這是必需的。
$('.selectpicker').selectpicker('refresh');
TypeError: $(...).selectpicker is not a function
$('.def_lang').selectpicker('refresh')
TypeError:$(...)。selectpicker不是函數
$( 'list_doc ')selectpicker(' 刷新')。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.