摘要：
上次分享省市县地址三级联动是将地址保存到js文件中，然后再进行调取。此次我们通过ajax来实现动态获取，即从数据库中直接得到数据信息......

一个多月前，也就是2015-10-23号的时候，艺灵在此版块中更新了一篇文章：jquery特效之美化destoon默认的省市县地址三级联动。今天，我们还来聊聊这个问题。

一、上次方法回顾

上次解决省市县地址三级联动是通过从数据库端将信息全部输出，然后直接保存到一个js文件中，然后再从此js文件中获取省市县等地区信息。

二、此次方法

此次，我们将换一种方法，用jquery ajax来获取数据，并且请求是动态的。也就是说：点击的时候是通过从数据库端调取数据，然后通过json输出想要的信息。

既然是从数据库端调取数据，当然少不了相关的php文件了，感谢@春杰同学帮艺灵写了这个php文件。有了查询数据库的文件后，剩下事情就很简单了。还是一点点来看这个完整案例吧。

三、php查询省市县地区信息文件

1.php查询省市县地址库源码

<?php
/*
　作者：艺灵设计 and 春杰，同事@春杰帮忙写了这个php文件
　时间：2015-12-02
　描述：查询destoon的“省市县地区数据库”信息
　来源：www.yilingsj.com
　版权：请使用此源码的看官自主保留版权信息，以便尊重创作者及方便后期获取更新文件，谢谢！
具体php源码文件已打包在文章尾处的压缩包中，需要的看官自行下载。
*/

四、存放php文件路径

文件写好后我们取一个名字吧，叫做：yilingsj_area，然后放到指定的位置中才能调取到信息。

放到哪里呢？请看下文。
步骤：网站根目录/任意文件夹，如:search_area/yilingsj_area.php，配图： 

五、案例演示

既然是案例演示，html、css、js是必不可少的，下面一步步实现。

1-1.html源码

<div class="ylsj-search-areaw clearfix">
　<span class="ylsj-site" id="ylsj-site">浙江省台州市临海市</span>
　<div class="ylsj-cityw pop-gyw" id="ylsj-cityw">
　　<div class="gytab-hd">
　　　<a id="ylsjc-cityhd_0" class="gh-list  on">省份</a><a id="ylsjc-cityhd_1" class="gh-list">城市</a><a id="ylsjc-cityhd_2" class="gh-list">地区</a>
　　</div>
　　<div class="gytab-bdw">
　　　<div class="gytab-bd">
　　　　<ul id="ylsjc-city_0" class="gb-list bd-on" style="display:block;">
　　　　</ul>
　　　　<ul id="ylsjc-city_1" class="gb-list " style="display:none;">
　　　　</ul>
　　　　<ul id="ylsjc-city_2" class="gb-list" style="display: none;">
　　　　</ul>
　　　</div>
　　</div>
　　<span class="pop-gydel" title="关闭" data-way="0" data-bg="0" data-effect="0">×</span>
　</div>
</div>

1-2.css样式

<style type="text/css">
*{margin: 0;padding: 0;}
h2{margin: 30px auto; text-align: center;}
.ylsj-search-areaw{position: relative;width: 460px; margin: 10px auto;}
.ylsj-site{height: 35px; line-height: 35px;width:460px; display: block; margin: 0 auto;max-width:550px; cursor: pointer;border: 1px solid #E2E2E2;}
.ylsj-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}
.ylsj-cityw .gytab-hd{border-bottom:2px solid #d9d9d9;height: 24px;}
.ylsj-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}
.ylsj-cityw .gytab-hd a.on{border:2px solid #d9d9d9;margin-bottom:-2px;border-bottom-color:#fff}
.ylsj-cityw .gytab-bd{padding:10px;padding-left:4px;padding-top:12px;margin-right:-30px}
.ylsj-cityw .gb-list{overflow:hidden}
.ylsj-cityw .gb-list li{width:70px;height:27px;line-height:22px;float:left;  color: #666;}
.ylsj-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)}
.ylsj-cityw .gytab-hd a,.ylsj-cityw .gb-list li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor: pointer;}
</style>

最后就是jquery了，由于代码比较多，已单独保存在文件中，直接引用即可。

1-3.引入jquery文件

<!--引入jquery库，版本号为:1.8.3。 如果看官的页面中已引入此库或者是高于此版本的库，可略过。-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<!--引入获取地址的js，需要使用的jquery库必须要大于1.8，以免某些高些写法在低版本中不支持-->
<script type="text/javascript" src="../search_area/yilingsj-area.js" ></script>

好了，所有工作都做完了，我们把html页面、js及php文件全部放到刚才的search_area文件夹中，配图： 

以前都说：无图无真相！而对于艺灵来说：有图无码无demo照样无真相！因为图可ps，而代码及demo才有更加的说服力！

如果看官想在线测试此功能，可点击右下方的demo看效果。效果配图：

资源下载

demojquery.ajax实现省市县三级地址联动demo.zip　积分下载 不喜勿下

好了，搞完了。回头看看，也不过如此嘛！如果看官在实现过程中有疑问，可在下方评论共中留言或者直接联系艺灵qq。

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

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

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