Encontré un código en línea que satisface mi necesidad de una lista de opciones en cascada. Pero también necesito hacer selecciones múltiples. Cuando agrego múltiples para seleccionar la etiqueta, me permite hacer selecciones múltiples. Sin embargo, se muestra como si solo se hubiera elegido 1 opción. Aquí está el código que estoy usando:

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>