摘要：
　　destoon默认的省市县地址三级联动是select式的，为了修改成自定义样式，一波三折！折腾一个多月才解决......

不得不说：这是一个很坑爹的事情！前前后后折腾了一个多月......

由于公司网站是使用的是destoon b2b系统，这个destoon默认的省市县地址三级联动功能是下拉菜单式的，如图： 而我们的需求是DIY，类似jquery选项卡切换那种，如图： 看似很简单的一件事情，然而在实现上却并不简单......

一、初期想法

刚开始我的想法是这样的：隐藏原有的下拉菜单，显示一个已经美化后的效果，当点击美化后的内容时用jquery去执行触发下拉菜单以达到改变值，然后再用jquery接收到新值并传递到美化后相对应的位置中。

想像是美好的，但现实是残酷的！上面的想法面临一个问题：当点击美化后的省份时，jquery去触发原有的下拉菜单，jquery将获取到的值输出到对应位置上。由于原有的下拉菜单在传值时会有一个时间，这里会出现接收到空值的情况。后来艺灵采用延时.5s后再传值，但问题仍然存在......

二、兼职帮忙

后来公司找了个从事多年php工作的人员帮忙解决问题，过了好多天，终于解决了问题。然而，这个代码中却存在着漏洞！阿里云服务器上拦截多次，如图：艺灵不得不直接删除代码，暂时隐藏此功能......

三、将地址保存到js中再读取

这几天又在搞这个问题，又是找php技术人员帮忙又是看json的。昨晚无奈之下被迫使用了一个笨方法：将地址事先保存到一个js文件中，点击时再从这个js文件中进行搜索值，然后再进行传递。

目前，省市县地址三级联动的功能已经实现，只是这个jquery代码在性能方面需要优化下。下面将完整的源码分享出来，如有需要可直接使用。

四、demo演示

1-0.引入地址库文件

<script type="text/javascript" src="http://www.wowobao.com/skin/wowobao_skin/js/area-city1.js" charset="UTF-8"></script>

来看一下这个地址库里面的代码吧。

1-1.地址库代码片段

var regions=[["1","0","\u5317\u4eac\u5e02"],["2","0","\u5929\u6d25\u5e02"],["3","0","\u6cb3\u5317\u7701"],......,["2417","379","\u5357\u5ddd\u5e02"]]

1-2.字段说明

regions[i][0]  /*输出的是areaid的值*/
regions[i][1]  /*输出的是parentid的值*/
regions[i][2]  /*输出的是areaname的值*/

上面的地址库代码是直接从phpmyadmin中输出的，地址表字段如图： 

如果想要取值的话，可以这样：regions[i][n]。这里的i指regions中的第i个["xx","xx","xx"]，n指第i个["xx","xx","xx"]中的第n个"xx"。还是举例说明下吧。

1-3.举例说明

var regions=[["1","0","\u5317\u4eac\u5e02"],["2","0","\u5929\u6d25\u5e02"],["3","0","\u6cb3\u5317\u7701"],["2417","379","\u5357\u5ddd\u5e02"]];/*测试代码片段*/
regions.length  /*输出:4*/
regions[1]  /*输出:["2","0","\u5929\u6d25\u5e02"]*/
regions[1][2]  /*输出:\u5929\u6d25\u5e02*/

上面代码输出结果配图： 说明一下，索引的值是从0开始，并非1！

接下来完成页面的布局。

2-0.相关html代码框架

<div class="so-selectw clearfix">
　<span class="ss-site" id="ss-site">浙江省余杭市</span>/*默认显示地区区域*/
　<div class="ss-cityw pop-gyw" id="ss-cityw">
　　<div class="gytab-hd">
　　　<a id="ssc-cityhd_0" class="gh-list  on">省份</a><a id="ssc-cityhd_1" class="gh-list">城市</a><a id="ssc-cityhd_2" class="gh-list">地区</a>
　　</div>
　　<div class="gytab-bdw">
　　　<div class="gytab-bd">
　　　　<ul id="ssc-city_0" class="gb-list bd-on" style="display:block;"><!--待加载省份--></ul>
　　　　<ul id="ssc-city_1" class="gb-list bd-on" style="display:block;"><!--待加载城市--></ul>
　　　　<ul id="ssc-city_2" class="gb-list bd-on" style="display:block;"><!--待加载县--></ul>
　　　</div>
　　</div>
　　<span class="pop-gydel" title="关闭按钮" data-way="0" data-bg="0" data-effect="0">×</span> 
　</div>
</div>

2-1.相关css样式

<style type="text/css">
*{margin: 0;padding: 0;}
.so-selectw{position: relative;width: 460px; margin: 10px auto;}
.ss-site{height: 35px; line-height: 35px;width:460px; display: block; margin: 0 auto;max-width:550px; cursor: pointer;border: 1px solid #E2E2E2;}

.ss-cityw{width:420px;padding:20px;padding-bottom:22px;border:1px solid #d9d9d9;left:0;top:36px;position:absolute;background:#fff;z-index:4;line-height:20px;display:none}
.ss-cityw .gytab-hd{border-bottom:2px solid #d9d9d9;height: 24px;}
.ss-cityw .gytab-hd a{width:85px;line-height:22px;border:1px solid #eee;border-bottom:0;margin-right:4px;color:#333;display:inline-block;text-align:center}
.ss-cityw .gytab-hd a.on{border:2px solid #d9d9d9;margin-bottom:-2px;border-bottom-color:#fff}
.ss-cityw .gytab-bd{padding:10px;padding-left:4px;padding-top:12px;margin-right:-30px}
.ss-cityw .gb-list{overflow:hidden}
.ss-cityw .gb-list li{width:70px;height:27px;line-height:22px;float:left;  color: #666;}
.ss-cityw .gb-list li:hover{color: #333;}
.pop-gydel{position:absolute;right:0;top:0;width:43px;height:43px;font:36px SimSun;color:#000;cursor:pointer;-webkit-transition:.5s ease-out;transition:.5s ease-out;text-align:center}
.pop-gydel:hover{color:#2577E3;-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.ss-cityw .gytab-hd a,.ss-cityw .gb-list li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor: pointer;}

</style>

最终效果如图：如果看官想下载源码，可在点击下面指定的链接进行下载。

资源下载

demojquery特效之美化destoon默认的省市县地址三级联动demo.zip

好了，这件事终于搞定了，下次再遇到这种问题，拿此代码分分钟即可解决需求！

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2015-10-23/335.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。