Using jquery or javascript to dynamically change select options using bootstrap?

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:

HTML

  • Refused to load the script because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'
  • Select Option dropdown taking time to close specifically in Chrome
  • How to send binary multipart formdata as base64?
  • ASP.net Button on click not firing using Jquery Modal Dialog
  • how to call a javascript function on radio button's 'checked' property?
  • Angular Material “md-chips” directive how to control that input field on select was focused not chip container?
  •             <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 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?

    Thanks for the help.

  • HTML Form - Execute script when pressing 'Enter', without submitting
  • Have two CSS embedded languages style in web page for different text lang type
  • How can I retain the scroll position of a scrollable area when pressing back button?
  • Making my own “draggable” function
  • Jquery extends element
  • How auto format input number with currency mask (Ionic)
  • 3 Solutions collect form web for “Using jquery or javascript to dynamically change select options using bootstrap?”

    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.

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

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

    $(‘.list_doc’).selectpicker(‘refresh’);