amazeUI 地区选择器三级联动问题解决，带地区数据

2018年5月25号

直接上代码

        <div id="area_box">
            <select data-am-selected="{maxHeight:200,btnWidth:'120px'}" placeholder="请选择省" id="province">
                <option value=""></option>
            </select>
            <select data-am-selected="{maxHeight:200,btnWidth:'120px'}" placeholder="请选择市" id="city">
                <option value=""></option>
            </select>
            <select data-am-selected="{maxHeight:200,btnWidth:'120px'}" placeholder="请选择区/县" id="area">
                <option value=""></option>
            </select>
        </div>
        <button class="weui-vcode-btn" id="send">下一步</button>

        +$(function() {
            var $province_value, $city_value, $area_value, $areas_code;
            $areas_code = 0;
            $('#area_box div:nth-child(4)').attr('class', 'am-selected am-dropdown hide');
            $('#area_box div:nth-child(6)').attr('class', 'am-selected am-dropdown hide');
            var $province = $('#province');
            var $province_length = areas.length;
            for(var i = 0; i < $province_length; i++) {
                var $option = $('<option value="' + i + '">' + areas[i].name + '</option>');
                $option.appendTo($province);
            }
            $('body').on('click', '#area_box>div:nth-child(2) li', function() {
                $province_value = $(this).attr('data-value');
                var $province_selected = $(this).children().html();
                var $city_length = areas[$province_value].sub.length;
                $('#area_box>div:nth-child(2) .am-selected-status').html($province_selected);
                $('#city').html('<option value=""></option>');
                $('#area').html('<option value=""></option>');
                for(var j = 0; j < $city_length; j++) {
                    var $option = $('<option value="' + j + '">' + areas[$province_value].sub[j].name + '</option>');
                    $option.appendTo($('#city'));
                }
                $('#area_box>div:nth-child(4)').attr('class', 'am-selected am-dropdown');
                $('#area_box>div:nth-child(6)').attr('class', 'am-selected am-dropdown hide');
                $areas_code = 1;
            });
            $('body').on('click', '#area_box>div:nth-child(4) li', function() {
                $city_value = $(this).attr('data-value');
                var $city_selected = $(this).children().html();
                var $area_length = areas[$province_value].sub[$city_value].sub.length;
                $('#area_box>div:nth-child(4) .am-selected-status').html($city_selected);
                $('#area').html('<option value=""></option>');
                for(var k = 0; k < $area_length; k++) {
                    var $option = $('<option value="' + k + '">' + areas[$province_value].sub[$city_value].sub[k].name + '</option>');
                    $option.appendTo($('#area'));
                }
                $('#area_box>div:nth-child(6)').attr('class', 'am-selected am-dropdown');
                $areas_code = 2;
            });
            $('body').on('click', '#area_box>div:nth-child(6) li', function() {
                $area_value = $(this).attr('data-value');
                var $area_selected = $(this).children().html();
                $('#area_box>div:nth-child(6) .am-selected-status').html($area_selected);
                $areas_code = [$province_value, $city_value, $area_value];
            });
            $('#send').click(function() {
                if($areas_code == 0) {
                    console.log('请选择省');
                } else if($areas_code == 1) {
                    console.log('请选择市');
                } else if($areas_code == 2) {
                    console.log('请选择区/县');
                }
            });
        });

地区数据满足以下格式
查看所有数据

var areas = [{
    "name": "北京",
    "code": "110000",
    "sub": [{
        "name": "北京市",
        "code": "110000",
        "sub": [{
            "name": "东城区",
            "code": "110101"
        }, {
            "name": "西城区",
            "code": "110102"
        }, {
            "name": "朝阳区",
            "code": "110105"
        }, {
            "name": "丰台区",
            "code": "110106"
        }, {
            "name": "石景山区",
            "code": "110107"
        }, {
            "name": "海淀区",
            "code": "110108"
        }, {
            "name": "门头沟区",
            "code": "110109"
        }, {
            "name": "房山区",
            "code": "110111"
        }, {
            "name": "通州区",
            "code": "110112"
        }, {
            "name": "顺义区",
            "code": "110113"
        }, {
            "name": "昌平区",
            "code": "110114"
        }, {
            "name": "大兴区",
            "code": "110115"
        }, {
            "name": "怀柔区",
            "code": "110116"
        }, {
            "name": "平谷区",
            "code": "110117"
        }, {
            "name": "密云县",
            "code": "110228"
        }, {
            "name": "延庆县",
            "code": "110229"
        }]
    }]
}, {
    "name": "天津",
    "code": "120000",
    "sub": [{
        "name": "天津市",
        "code": "120000",
        "sub": [{
            "name": "和平区",
            "code": "120101"
        }, {
            "name": "河东区",
            "code": "120102"
        }, {
            "name": "河西区",
            "code": "120103"
        }, {
            "name": "南开区",
            "code": "120104"
        }, {
            "name": "河北区",
            "code": "120105"
        }, {
            "name": "红桥区",
            "code": "120106"
        }, {
            "name": "东丽区",
            "code": "120110"
        }, {
            "name": "西青区",
            "code": "120111"
        }, {
            "name": "津南区",
            "code": "120112"
        }, {
            "name": "北辰区",
            "code": "120113"
        }, {
            "name": "武清区",
            "code": "120114"
        }, {
            "name": "宝坻区",
            "code": "120115"
        }, {
            "name": "滨海新区",
            "code": "120116"
        }, {
            "name": "宁河县",
            "code": "120221"
        }, {
            "name": "静海县",
            "code": "120223"
        }, {
            "name": "蓟县",
            "code": "120225"
        }]
    }]
}];