数据库存储数组或json实现 3级或N级联动

html代码为

<table class="form-table">
         <tbody>
                <tr class="firstRow">
                    <th>工单路径</th>
                    <td id="orderTypes">
                        <ui id="orderPathUi">
                            
                        </ui>
                    </td>
                </tr>

          </tbody>
  </table>

js代码

//假设有张配置表 config     value 为以下字符串
let orderTypes=[{"title":"咨询","key":"zx","children":[{"title":"和路通","key":"zx-hlt","children":[{"title":"智能后视镜X1","key":"zx-hlt-znhsj1","children":[]},{"title":"智能后视镜P1","key":"zx-hlt-znhsjp1","children":[]},{"title":"和路通M1/M1 Pro","key":"zx-hlt-hltm1","children":[]},{"title":"平台","key":"zx-hlt-pt","children":[]},{"title":"记录仪","key":"zx-hlt-jly","children":[]}]},{"title":"和车队","key":"zx-hcd","children":[{}]}]},{"title":"投诉","key":"ts","children":[{"title":"和路通","key":"ts-hlt","children":[{"title":"智能后视镜X1","key":"ts-hlt-znhsj1","children":[]},{"title":"智能后视镜X2","key":"ts-hlt-znhsj2","children":[]},{"title":"和路通E1","key":"ts-hlt-hlte1","children":[]},{"title":"记录仪","key":"ts-hlt-jly","children":[]}]},{"title":"和车队","key":"ts-hcd","children":[{}]}]}]

//已选中的数据 key
        var selectedKey=[];
        //已选中的数据对象
        var selectedData=[];
        // orderTypes=[{"title":"咨询","key":"zx","children":[{"title":"和路通","key":"zx-hlt","children":[{"title":"智能后视镜X1","key":"zx-hlt-znhsj1","children":[]},{"title":"智能后视镜X2","key":"zx-hlt-znhsj2","children":[]},{"title":"智能后视镜X3","key":"zx-hlt-znhsj3","children":[]},{"title":"OBD盒子","key":"zx-hlt-obdhz","children":[]},{"title":"和路通D1","key":"zx-hlt-hltd1","children":[]},{"title":"和路通D2","key":"zx-hlt-hltd2","children":[]},{"title":"后视镜R611","key":"zx-hlt-hsjr611","children":[]},{"title":"智能后视镜P1","key":"zx-hlt-znhsjp1","children":[]},{"title":"和路通M1/M1 Pro","key":"zx-hlt-hltm1","children":[]},{"title":"和路通S1","key":"zx-hlt-hlts1","children":[]},{"title":"T-BOX","key":"zx-hlt-tbox","children":[]},{"title":"平台","key":"zx-hlt-pt","children":[]},{"title":"记录仪","key":"zx-hlt-jly","children":[]}]},{"title":"和车队","key":"zx-hcd","children":[{}]},{"title":"商机","key":"zx-sj","children":[{}]}]},{"title":"投诉","key":"ts","children":[{"title":"和路通","key":"ts-hlt","children":[{"title":"智能后视镜X1","key":"ts-hlt-znhsj1","children":[]},{"title":"智能后视镜X2","key":"ts-hlt-znhsj2","children":[]},{"title":"智能后视镜X3","key":"ts-hlt-znhsj3","children":[]},{"title":"OBD盒子","key":"ts-hlt-obdhz","children":[]},{"title":"和路通D1","key":"ts-hlt-hltd1","children":[]},{"title":"和路通D2","key":"ts-hlt-hltd2","children":[]},{"title":"后视镜R611","key":"ts-hlt-hsjr611","children":[]},{"title":"智能后视镜P1","key":"ts-hlt-znhsjp1","children":[]},{"title":"和路通M1/M1 Pro","key":"ts-hlt-hltm1","children":[]},{"title":"和路通S1","key":"ts-hlt-hlts1","children":[]},{"title":"和路通S2","key":"ts-hlt-hlts2","children":[]},{"title":"和路通E1","key":"ts-hlt-hlte1","children":[]},{"title":"和路通E2","key":"ts--hlte2","children":[]},{"title":"T-BOX","key":"ts-hlt-tbox","children":[]},{"title":"平台","key":"ts-hlt-pt","children":[]},{"title":"记录仪","key":"ts-hlt-jly","children":[]}]},{"title":"和车队","key":"ts-hcd","children":[{}]}]}];
        //当前节点子集数据
        var currentNodeChildData=orderTypes;
        var orderPathUiElm ;

  		orderPathUiElm=document.getElementById('orderPathUi');
        orderPathAppendChild($compile,$scope,orderTypes);


		/**
         * 工单路径 联动 添加子节点r
         */
        function orderPathAppendChild($compile,$scope,arr) {
            // let select = '<li><select style="max-width:160px;margin-right:6px" name="orderPath" class="" > <option value="*">--请选择--</option>';
            let li = document.createElement("li");
            let select = document.createElement("select");
            select.style.maxWidth="160px";
            select.style.marginRight="6px";
            select.className="form-control ng-pristine ng-valid ng-valid-custom-validate";
            select.name="orderPath";

            let defaultOption = document.createElement("option");
            defaultOption.value="*";
            defaultOption.text="--请选择--";
            select.appendChild(defaultOption)  ;
            if (arr.length>0){
                for (let i = 0; i < arr.length; i++) {
                    let orderType = arr[i];
                    let option = document.createElement("option");
                    option.value=orderType.key;
                    option.text=orderType.title;
                    select.appendChild(option);
                }
            }
            li.appendChild(select);
            let childNodes = orderPathUiElm.childNodes;
            orderPathUiElm.insertBefore($compile(li)($scope)[0], childNodes[childNodes.length-1]);
            addChangeEvent($compile,$scope,select,arr);

        }

        /**
         * 添加change事件
         * @param $compile
         * @param $scope
         * @param select
         * @param arr
         */
        function addChangeEvent($compile,$scope,select,arr) {
            let orderPath = document.getElementsByName('orderPath');
            select.addEventListener('change',function(){
                for (let i = 0; i < orderPath.length; i++) {
                    if (orderPath[i]===select){
                        let value = select.selectedOptions[0].value;
                        selectedKey.splice(i);
                        selectedData.splice(i);
                        querySelectedNode(value,arr);
                        setNextChildrenData();
                        removeChildrenNode(orderPath);
                        orderPathAppendChild($compile,$scope,currentNodeChildData);
                        // console.log("selectedKey",selectedKey);
                        // console.log("当前节点子集数据",currentNodeChildData);
                    }
                }
                
            },false)
        }

        /**
         * 查询选中节点 对象
         * @param key
         * @param arr
         */
        function querySelectedNode(key,arr){
            arr.forEach(function(data){
                if (key===data.key){
                    selectedKey.push(key);
                    selectedData.push(data);
                    return false;
                }else{
                    querySelectedNode(key,data.children);
                }
            });
        }

        /**
         * 设置下一节点数据
         */
        function setNextChildrenData(){
            let data = selectedData[selectedData.length-1];
            if (selectedKey.length>0){
                if (data){
                    currentNodeChildData=data.children
                }else{
                    currentNodeChildData= selectedData[selectedData.length-2].children
                }
            }else{
                currentNodeChildData=data?data.children:orderTypes
            }
        }
        /**
         * 删除子节点
         * @param orderPath
         */
        function removeChildrenNode(orderPath){
            let removeNodes=[];
            orderPath.forEach(function (path) {
                if (selectedKey.indexOf(path.value)===-1){
                    // console.log(orderPath);
                    removeNodes.push(path.parentNode);
                }
            });
            //这里有个坑，不能写在for循环里面 删除   ，切记  ，折腾一晚上。。
            removeNodes.forEach(function (node) {
                orderPathUiElm.removeChild(node);
            })

        }