Avalon.js Multi-level drop-down box implementation

When learning avalon.js, there is an example of a multi-level dropdown box, where the code of the address stamp implements the linkage,

But the logic above is somewhat difficult to understand, and there is a problem with getting the selected values and page initialization functionality.

When writing the map editing, also used a multi-level drop-down box, specifically to organize the following example, the main implementation of the difficulty is to initialize the value of the array.

vardata = [    {"id": 0, "name": "1 Company", "Grade":-1, "ParentID": "1"},    {"id": 1, "name": "Guangdong Company", "Grade": 0, "ParentID": "0"},    {"id": 2012300001, "name": "Guangzhou 1 branch", "Grade": 1, "ParentID": 1},    {"id": 200000000, "name": "Guangzhou Branch", "Grade": 1, "ParentID": 1},    {"id": 4050, "name": "Tianhe Branch", "Grade": 2, "ParentID": 200000000},    {"id": 999182, "name": "Industrial Park Marketing Service Center", "Grade": 3, "ParentID": 4050},    {"id": 4174, "name": "Nansha Branch", "Grade": 2, "ParentID": 200000000},    {"id": 10121, "name": "Nansha Marketing Service Center", "Grade": 3, "ParentID": 4174},];varMain_key;varKeytree = {};varKeyMap = {}; for(vari = 0, len = data.length; i < Len; i++) {    varobj =Data[i]; varPId =Obj.parentid; Keymap[obj.id]=obj; if(Obj.parentid = =-1) {Main_key=obj.id; } Else{Keytree[pid]= Keytree[pid] | | [];    Keytree[pid].push (obj.id); }}varNoOp =function() {};window.vmmultiselect=Avalon.define ({$id:"MultiSelect", Areashap: [Main_key,""],//data form, starting with the root node ID, do not display a drop-down box, the last one is selectable drop-down box, then ", the current check value, or the last value is not"Selectchange:function(Val, M) {//when the data shape changes        varindex = M.args[0]. $index; if(Vmmultiselect.isinitselect (Index) = = =false)return; varAreas =Vmmultiselect.areashap;  for(vari = areas.length-1, end = index; i > End; i--) {areas.removeat (i);//Clear Descendants        }        if(Keytree[val]) {Areas.push ("");//have a son, then push ""}}, Isinitselect:noop, Initselect:function(val) {Vmmultiselect.areashap= [0, "1", "200000000", "4050", "" "]; varLen = vmmultiselect.areashap.length-1; Vmmultiselect.isinitselect=function(Index) {console.log (index, Len)if(Index <Len) {                    return false;//do not respond to Selectchange}Else{vmmultiselect.isinitselect= NoOp;//Recovery Response Selectchange                return false; }        }    }});//Vmmultiselect.initselect ([0, "1", "200000000", "4050", "" "]); By setting the data directly, initialize the select (you can also write a function that organizes itself into the corresponding data form)

Online case code, poke here

Avalon.js Multi-level drop-down box implementation