Sử dụng jquery hoặc javascript để tự động thay đổi các tùy chọn chọn bằng cách sử dụng bootstrap?

Question

Tôi đang cố gắng tự động thay đổi các tùy chọn chọn sử dụng selectpicker từ bootstrap. Nó dường như không hoạt động với bootstrap nhưng không có nó, nó hoạt động tốt.
Dưới đây là mã của tôi:

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> 

Khi tôi chọn một tùy chọn từ dự án, nó phải tải lên một tập hợp các tùy chọn cho tác vụ như được định nghĩa trong tệp xml. Vì vậy, ví dụ, nếu tôi nhấp vào Dự án 2, nó sẽ tải nhiệm vụ 4 và nhiệm vụ 5 trong tùy chọn nhiệm vụ. Điều này làm việc nếu tôi loại bỏ các selectpicker nhưng có cách nào tôi có thể giữ cho các selectpicker và làm điều này cùng một lúc?

Cảm ơn sự giúp đỡ.

Answer 1

Từ bootstrap-select website:

Để lập trình cập nhật một chọn với JavaScript, đầu tiên thao tác lựa chọn, sau đó sử dụng phương pháp refresh để cập nhật giao diện người dùng để phù hợp với trạng thái mới. Điều này là cần thiết khi xóa hoặc thêm tùy chọn hoặc khi tắt/bật lựa chọn qua JavaScript.

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

Answer 2

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


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

Answer 3

Lỗi Loại: $ (...) selectpicker không phải là một chức năng ('list_doc. ')

$ selectpicker (' refresh');..