自己根据公司需求，写的省市区三级菜单（代码感觉很挫，后续思维提高了再改进吧~~）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <style>
        ul {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        #province, #city, #area {
            float: left;
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 500px;
            background: #ccc;
        }
        /*#province{
            left: 0;}
        #city{
            left: 100px;}
        #area{
            left: 200px;}*/
    </style>
</head>
<body style="margin:0;">
<div id="close" style="position: absolute;top: 0;left: 300px;width: 30px;height: 30px;background: #fff;">
    <div style="transform:rotate(45deg);transform-origin:0 100%;font-size:40px;">+</div>
</div>
<ul id="province" style="z-index:1;"></ul>
<ul id="city" style="display: none;z-index: 1;background: #fff;"></ul>
<ul id="area" style="display: none;z-index: 1;"></ul>
<div id="text" style="display: block;margin-left: 400px;">
    <div id="provinceText">Province</div>
    <div id="cityText">City</div>
    <div id="areaText">Area</div>
</div>
<script type="text/javascript" src="zepto.all.min.js"></script>
<script type="text/javascript" src="mygeo.js"></script>
<script>
    var provinceIndex = null;
    var cityIndex = null;
    var areaIndex = null;
    var fnShow = function (type, html) {
        console.log(type, html);
        if (type == ‘province‘) {
            $(‘#provinceText‘).html(html);
        } else if (type == ‘city‘) {
            $(‘#cityText‘).html(html);
        } else if (type == ‘area‘) {
            $(‘#areaText‘).html(html);
            if (html != ‘‘) {
                $(‘#province‘).hide();
                $(‘#city‘).html(‘‘).hide();
                $(‘#area‘).html(‘‘).hide();
            }
        }
    };
    function fnClosePanel(args) {
        aArgs = args.split(‘_‘);
        console.log(aArgs[0] + ‘_‘ + aArgs[1] + ‘_‘ + aArgs[2]);
        if (aArgs[0] == ‘null‘) {
            $(‘#province‘).hide();
        } else if (aArgs[0] != ‘null‘ && aArgs[1] == ‘null‘ && aArgs[2] == ‘null‘) {
            $(‘#city‘).html(‘‘).hide();
            $(‘#provinceText‘).html(‘‘);
            provinceIndex = null;
            cityIndex = null;
        } else if (aArgs[0] != ‘null‘ && aArgs[1] != ‘null‘ && aArgs[2] == ‘null‘) {
            $(‘#area‘).html(‘‘).hide();
            $(‘#cityText‘).html(‘‘);
            cityIndex = null;
            areaIndex = null;
        }
    }
    function initProvince() {
        var province = dsy.Items[0];
        var oProvinceHtml = ‘‘;
        for (var i = 0; i < province.length; i++) {
            oProvinceHtml += ‘<li>‘ + province[i] + ‘</li>‘;
        }
        $(‘#province‘).html(oProvinceHtml);
    }
    $(‘#province‘).on(‘click‘, ‘li‘, function () {
        $(‘#city‘).show();
        $(‘#area‘).hide();
        provinceIndex = $(‘#province li‘).index($(this));
        fnShow(‘province‘, this.innerHTML);
        fnShow(‘area‘, ‘‘);
        fnShow(‘city‘, ‘‘);
        var city = dsy.Items[‘0_‘ + provinceIndex];
        var oCityHtml = ‘‘;
        for (var i = 0; i < city.length; i++) {
            oCityHtml += ‘<li>‘ + city[i] + ‘</li>‘;
        }
        $(‘#city‘).html(oCityHtml);
        $(‘#area‘).html(‘‘);
        cityIndex = null;
        areaIndex = null;
        console.log(provinceIndex + ‘_‘ + cityIndex + ‘_‘ + areaIndex);
    });
    $(‘#city‘).on(‘click‘, ‘li‘, function () {
        $(‘#area‘).show();
        cityIndex = $(‘#city li‘).index($(this));
        fnShow(‘city‘, this.innerHTML);
        fnShow(‘area‘, ‘‘);
        var area = dsy.Items[‘0_‘ + provinceIndex + ‘_‘ + cityIndex];
        var oAreaHtml = ‘‘;
        for (var i = 0; i < area.length; i++) {
            oAreaHtml += ‘<li class="village">‘ + area[i] + ‘</li>‘;
        }
        $(‘#area‘).html(oAreaHtml);
        areaIndex = null;
        console.log(provinceIndex + ‘_‘ + cityIndex + ‘_‘ + areaIndex);
    });
    $(‘#area‘).on(‘click‘, ‘li‘, function () {
        areaIndex = $(‘#area li‘).index($(this));
        fnShow(‘area‘, this.innerHTML);
        console.log(provinceIndex + ‘_‘ + cityIndex + ‘_‘ + areaIndex);
    });
    $(‘#close‘).on(‘click‘, function () {
        fnClosePanel(provinceIndex + ‘_‘ + cityIndex + ‘_‘ + areaIndex);
    });
    initProvince();
</script>
</body>
</html>