create_multilevel_dropdown.js

function showMultilevelDropdownMenu(title, elementId, data, nameKey, valueKey, childrenKey) {
  /* 
  This function can be used to create a multilevel dropdown menu. 

  It needs the following arguments:
  - title: title of the main Dropdown Button
  - elementId: Where the dropdown menu will be generated within.
  - data: array of JS object, with the following attributes:
    - nameKey: this attribute will be used as the displayed innerHTML/ text of the menu option
    - valueKey: this attribute will be used as the "value" attribute of the menu option
      (useful for form submission)
    - childrenKey: this attribute should contain other JS object of same type.

  */


  function createDropdownOption(object, containerElement, childrenKey) {
    // This function will be nested though the object's children as well

    function dropDownItem(value, name) {
      // Create <a> dropdown-item element
      let item = document.createElement("a");
      item.className = "dropdown-item";
      item.setAttribute("value", value);
      item.innerHTML = name;
      return item;
    }

    var option = dropDownItem(object[valueKey], object[nameKey]);
    var listing = document.createElement("li");
    listing.appendChild(option);

    // Iterate through children and children of children..
    let children = object[childrenKey];
    if (children.length > 0) {
      // add class to parent li element
      listing.className += "dropdown-submenu ";

      // add fancy arrow element to the right
      let caret = document.createElement("span");
      var caretClassNames = "text-muted small glyphicon pull-right ",
        caretDown = caretClassNames + "glyphicon-triangle-bottom ",
        caretRight = caretClassNames + "glyphicon-triangle-right ";

      caret.className = caretDown;
      option.appendChild(caret);

      listing.addEventListener("mouseover", function () {
        this.querySelector(".pull-right").className = caretRight;
      });
      listing.addEventListener("mouseleave", function () {
        this.querySelector(".pull-right").className = caretDown;
      });

      // Create a nested ul element to contain children
      let childElement = document.createElement("ul");
      childElement.className = "dropdown-menu nested-dropdown-menu";

      for (var i = 0; i < children.length; i++) {
        createDropdownOption(children[i], childElement, childrenKey);
      }
      listing.appendChild(childElement);
    }

    // Add li element to provided ul container element
    containerElement.appendChild(listing);
  }

  // Create Main Elements for the dropdown menu
  // First, the button
  let mainBtn = document.createElement("button");
  mainBtn.className = "btn btn-default dropdown-toggle multi-level-dropdown";
  mainBtn.setAttribute("type", "button");
  mainBtn.setAttribute("data-toggle", "dropdown");
  mainBtn.id = "enquiry-topic-categories-mainBtn";
  mainBtn.innerHTML = title;

  // Then, the actual dropdown menu
  let mainListElement = document.createElement("ul");
  mainListElement.className = "dropdown-menu";
  mainListElement.id = "enquiry-topics";

  // Iterate through the nested array and add elements to the dropdown menu
  for (var i = 0; i < data.length; i++) {
    createDropdownOption(data[i], mainListElement, childrenKey);
  }

  document.getElementById(elementId).appendChild(mainBtn);
  document.getElementById(elementId).appendChild(mainListElement);
}

Note: the main element needs class="dropdown"