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

时间：2014-11-30 06:14:24 阅读：260 评论：0 收藏：0 [点我收藏+]

标签：style blog http io ar color os sp java

代码感觉很挫，后续思维提高了再改进吧~~

全部的HTML贴在这里：

<!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>

引用了Zepto.js

mygeo.js则引用了QQ的数据（见http://ip.qq.com/js/geo.js），

function Dsy() {
    this.Items = {};
}
Dsy.prototype.add = function (id, iArray) {
    this.Items[id] = iArray;
}
Dsy.prototype.Exists = function (id) {
    if (typeof(this.Items[id]) == "undefined") return false;
    return true;
}

var dsy = new Dsy();

dsy.add("0_0_0", ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]);

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

标签：style blog http io ar color os sp java

原文地址：http://www.cnblogs.com/lixiaoyaoslove/p/4132292.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行