【代码分享】三级菜单下拉框

预览作品：
http://99a527e0.u.mgd5.com/campaigns/5703c164b485a5842c00001e/20170303094253/58b8c99c92b5790d745aedf9/index.html
可以实现选择三级菜单，可以做归属地选择等内容
 使用方法：
1：在舞台上画一个物体，命名为“select”
2：在舞台外面放入3个输入框，分别命名为“省”、“市”、“县”。
（这个是用来作为表单提交使用的，提交表单时提交的是这三个输入框）
3：将以下代码复制进入脚本内

function addCss(rule) {
    var css = document.createElement('style');
    css.type = 'text/css';
    if (css.styleSheet) 
        css.styleSheet.cssText = rule;
    else 
        css.appendChild(document.createTextNode(rule));
    document.getElementsByTagName("head")[0].appendChild(css);
}

var rule = '.custom-select {width:80px; height:30px;margin-left:8px;}';
//在这里修改选择框样式
addCss(rule);

function fillSelectOptions(select, optionsArr) {
    select.innerHTML = '';
    for (var i = 0, l = optionsArr.length; i < l; i ++ ) {
        var option = new Option(optionsArr, optionsArr[i]);
        select.options.add(option);
    }
}


mugeda.addEventListener('renderReady', function () {
    
    var list = {
//在这里填入选择层级的内容
        '宁夏': {
            "中卫": ["XX", "XX1"], "吴忠": 1, '固原': 1, '银川': 1
        },
        '山东': {
            '济南市': 1,
            '淄博市': ['桓台县', '高青县'],
            '济宁市': ['鱼台县', '金乡县']
        }
    };
    
    var scene = mugeda.scene;
    var selectObj = scene.getObjectByName('select');
    var selectDom = selectObj.dom;
    
    var province = scene.getObjectByName('省');
    var city = scene.getObjectByName('市');
    var district = scene.getObjectByName('县');
    
    selectDom.innerHTML = '<select class="custom-select province">' + 
        '<option>请选择-省</option>' + '</select>' + 
        '<select class="custom-select city">' + 
        '<option>请选择-市</option>' + '</select>' + 
        '<select class="custom-select district">' + 
        '<option>请选择-县</option>' +
        '</select>';
    
    var provinceSelect = document.querySelector('select.province');
    var citySelect = document.querySelector('select.city');
    var districtSelect = document.querySelector('select.district');
    
    var provinceList = Object.keys(list);
    provinceList.splice(0, 0, '请选择-省');
    fillSelectOptions(provinceSelect, provinceList);
    provinceSelect.addEventListener('change', function () {
        var provinceEntry = list[this.value];
        if (provinceEntry) {
            province.text = this.value;
            var citys = Object.keys(provinceEntry);
            fillSelectOptions(citySelect, citys);
            var districtList = provinceEntry[citys[0]];
            city.text = citys[0];
            if (districtList !== 1) {
                district.text = districtList[0];
                fillSelectOptions(districtSelect, districtList);
            } else {
                district.text = '';
            }
        } else {
            fillSelectOptions(citySelect, ['请选择-市']);
            fillSelectOptions(districtSelect, ['请选择-县']);
            province.text = '';
            city.text ='';
            district.text = '';
            console.log('Not Found Province Item');
        }
    });
    
    citySelect.addEventListener('change', function () {
       var provinceEntry = list[provinceSelect.value]; 
       if (provinceEntry) {
            var districtList = provinceEntry[this.value];
            province.text = provinceSelect.value;
            city.text = this.value;
            if (district !== 1) {
                fillSelectOptions(districtSelect, districtList);
                district.text = districtList[0];
            }
            else {
                districtSelect.innerHTML = '';
                district.text = '';
            }
        } else
            console.log('Not Found District Item');
    });
    
    
    districtSelect.addEventListener('change', function () {
       district.text = this.value; 
    });
});
 
//在脚本标记处填入此格式的代码
 '宁夏'
//一级菜单
: {
            "中卫"
//二级菜单
: ["XX", "XX1"
//三级菜单
], "吴忠": 1, '固原': 1, '银川': 1
        },
 
不理解可以看编辑地址
http://cn.mugeda.com/animation/edit/8f9b2ca1[/i]