Using jquery or javascript to dynamically change selections using bootstrap?

Question

I am trying to dynamically change the selection options that use selectpicker from bootstrap. It doesn't seem to work with bootstrap, but without it it works fine.
Here is my code:

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> 

When I select an option from the project, it should load a set of parameters for the task defined in the XML file. So, for example, if I click Project 2, it should load task 4 and task 5 in the task. This works if I delete selectpicker, but is there a way to save selectpicker and do it at the same time?

Thanks for the help.

Answer 1

On the bootstrap-select website:

To programmatically update a selection using JavaScript, first process the selection, then use the update method to update the user interface to match the new state. This is necessary when deleting or adding parameters or when disabling / enabling selections via JavaScript.

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

Answer 2

 TypeError: $(...).selectpicker is not a function $('.def_lang').selectpicker('refresh') 

Answer 3

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

$ ('list_doc.) Selectpicker (' Refresh ') ;.