I have found code online that satisfies my need of cascading option list. But I also need to make multiple selections. When I add multiple to select tag it allows me to make multiple selections. However it shows as if only 1 option was choosed. Here is the code I am using:

Javascript:

var root_1_Object = {{ url_categories|safe }}
window.onload = function() {
var root_1_Sel = document.getElementById("root_1");
var root_2_Sel = document.getElementById("root_2");
var root_3_Sel = document.getElementById("root_3");

for (var x in root_1_Object) {
    root_1_Sel.options[root_1_Sel.options.length] = new Option(x, x);
}
root_1_Sel.onchange = function() {
    //empty root_3_S- and root_2_S- dropdowns
    root_3_Sel.length = 1;
    root_2_Sel.length = 1;
    //display correct values
    for (var y in root_1_Object[this.value]) {
        root_2_Sel.options[root_2_Sel.options.length] = new Option(y, y);
    }
}
root_2_Sel.onchange = function() {
    //empty root_3_S dropdown
    root_3_Sel.length = 1;
    //display correct values
    var z = root_1_Object[root_1_Sel.value][this.value];
    for (var i = 0; i < z.length; i++) {
    root_3_Sel.options[root_3_Sel.options.length] = new Option(z[i], z[i]);
    }
    console.log(root_3_Sel);

}
}

Html:

                <select name="root_1" id="root_1" multiple required/>
                    <option value="" selected="selected"></option>
                </select>
                <br><br>

                
                <select name="root_2" id="root_2" multiple required/>
                    <option value="" selected="selected"></option>
                </select>
                <br><br>

                
                <select name="root_3" id="root_3" multiple required/>
                    <option value="" selected="selected"></option>
                </select>
                <br><br>