jquery实现省市联动几种方式的对比

最新推荐文章于 2023-08-18 18:17:12 发布

kevonz

最新推荐文章于 2023-08-18 18:17:12 发布

阅读量1.6w

点赞数

分类专栏： Javascript/JQuery 文章标签： jquery function 数据库服务器 xhtml html

本文链接：https://blog.csdn.net/kevonz/article/details/5795992

版权

Javascript/JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jquery实现省市联动的是老话题了，网上搜下一大堆，百花齐放，本文搜集几个，比较之余，等到使用之时也方便借鉴，我会注明原作者的出处的。

1. 直接将省市县内容做成json对象，写入js文件的，优点：兼容性，简单易用；缺点：存到数据库里面的是文本，对数据的再次查询效率低下。可以改良一下，在数据库里面也存一套数据，但是务必请保持数据一致。

本段代码来自http://shouwang.blog.51cto.com/1186550/268190。

代码中原作者将直辖市里面的区和县分开了，读者亦可自行简化合并一下即可，修改还是比较方便的。代码中有一个bug，默认第一项省份选择了北京，但是后面的市县里面并没有load数据，使用时请稍加修改。

另一位作者的文章，彦磊基于jQuery省市县联动插件，也是使用此方法，由于作者的注释加的已经非常详细了，此处不再赘述，读者根据自己喜欢来选择喜欢的风格吧。

2. 将数据存入数据库，通过服务器端查询，使用jquery进行动态加载。这种方法的优点是很好的保持了数据的一致性；缺点也很明显，每次都要到服务器端查询，比较消耗网络资源和服务器的cpu。使用这种方式需谨慎。

3. 将数据存入xml中，使用jquery的ajax方法，将数据异步加载到客户端，然后进行处理。服务器端将xml数据和数据库里面的数据结合使用。这是一种折中的办法，客户端的效率几乎可以达到与第一种方式时的同等效率，通过程序查询时几乎可以达到与第二种方式时的同等效率。

HTML代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <mce:script src="Scripts/jquery-1.4.2.min.js" mce_src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <select id="province"></select> <select id="city"></select> <select id="county"></select> </body> </html>

XML数据（部分）

<?xml version="1.0" encoding="gb2312"?> <root name="中国"> <province name="北京" postcode="beijing" index="1" id="1"> <city name="北京" postcode="100000" index="1"> <area name="北京市" postcode="100000" price="1" index="1"/> <area name="门头沟区" postcode="102300" index="2"/> <area name="房山区" postcode="102400" index="3"/> <area name="顺义区" postcode="101300" index="4"/> <area name="通州区" postcode="101100" index="5"/> <area name="昌平区" postcode="102200" index="6"/> <area name="密云县" postcode="101500" index="7"/> <area name="延庆县" postcode="102100" index="8"/> <area name="大兴县" postcode="102600" index="9"/> <area name="怀柔县" postcode="101400" index="10"/> <area name="平谷县" postcode="101200" index="11"/> </city> </province> <province name="上海" postcode="shanghai" index="2"> <city name="上海" postcode="200000" index="2"> <area name="上海市" postcode="200000" index="12"/> <area name="上海近郊区" postcode="200100" index="13"/> <area name="闵行区" postcode="201100" index="14"/> <area name="浦东新区" postcode="200120" index="15"/> <area name="南汇县" postcode="201300" index="16"/> <area name="奉贤县" postcode="201400" index="17"/> <area name="金山县" postcode="201500" index="18"/> <area name="松江县" postcode="201600" index="19"/> <area name="青浦县" postcode="201700" index="20"/> <area name="嘉定县" postcode="201800" index="21"/> <area name="宝山县" postcode="201900" index="22"/> <area name="崇明县" postcode="202150" index="23"/> </city> </province>

此部分xml数据较老，请到国家统计局下载最新数据