首页 > 代码库 > 自己根据公司需求，写的省市区三级菜单（代码感觉很挫，后续思维提高了再改进吧~~）
自己根据公司需求，写的省市区三级菜单（代码感觉很挫，后续思维提高了再改进吧~~）
代码感觉很挫，后续思维提高了再改进吧~~
全部的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", ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]);
自己根据公司需求，写的省市区三级菜单（代码感觉很挫，后续思维提高了再改进吧~~）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。