avalon.js 多级下拉框实现

学习avalon.js的时候，有一个多级下拉框的例子，地址 戳这里 代码实现了联动，

但是逻辑上面理解有点难度，获取选择的值 和 页面初始化 功能存在问题。

在写地图编辑的时候，也用到了多级下拉框，特地整理下例子，其中主要实现的难点就是初始化数组的值。

var data = [
    {"id": 0, "name": "1公司", "grade": -1, "parentid": "-1"},
    {"id": 1, "name": "广东公司", "grade": 0, "parentid": "0"},
    {"id": 2012300001, "name": "广州1分公司", "grade": 1, "parentid": 1},
    {"id": 200000000, "name": "广州分公司", "grade": 1, "parentid": 1},
    {"id": 4050, "name": "天河分公司", "grade": 2, "parentid": 200000000},
    {"id": 999182, "name": "工业园营销服务中心", "grade": 3, "parentid": 4050},
    {"id": 4174, "name": "南沙分公司", "grade": 2, "parentid": 200000000},
    {"id": 10121, "name": "南沙营销服务中心", "grade": 3, "parentid": 4174},
];
var MAIN_KEY;
var keyTree = {};
var keyMap = {};
for (var i = 0, len = data.length; i < len; i++) {
    var obj = data[i];
    var pId = obj.parentid;
    keyMap[obj.id] = obj;
    if (obj.parentid == -1) {
        MAIN_KEY = obj.id;
    } else {
        keyTree[pId] = keyTree[pId] || [];
        keyTree[pId].push(obj.id);
    }
}

var  noop =  function () {};
window.vmMultiSelect = avalon.define({
    $id: "multiSelect",
    areaShap: [MAIN_KEY, ""], //数据形式，一开始为根结点id，不显示下拉框, 最后一个为可选择下拉框，则为‘‘，当前选中值，则为最后不为‘‘的值
    selectchange: function(val, m) { //数据形变化时
        var index = m.args[0].$index;
        if (vmMultiSelect.isInitSelect(index) === false) return;
        var areas = vmMultiSelect.areaShap;
        for (var i = areas.length - 1, end = index; i > end; i--) {
            areas.removeAt(i);//清楚子孙
        }
        if (keyTree[val]) {
            areas.push("");//有儿子，则push""
        }
    },
    isInitSelect: noop,
    initSelect: function (val) {
        vmMultiSelect.areaShap = [0, "1", "200000000", "4050", ""];
        var len = vmMultiSelect.areaShap.length - 1;
        vmMultiSelect.isInitSelect = function (index) {
            console.log(index, len)
            if (index < len) {
                return false;//不响应selectchange
            } else {
                vmMultiSelect.isInitSelect = noop;//恢复响应selectchange
                return false;
            }
        }
    }
});
//vmMultiSelect.initSelect([0, "1", "200000000", "4050", ""]); 通过直接设置数据，初始化select(也可以再写个函数，自己组织成对应数据形式)

在线事例代码，戳这里