现在的位置: 首页 > 综合 > 正文

javascript实现全国省市区县多级联动 2013最新最全数据

2013年08月06日 ⁄ 综合 ⁄ 共 1525字 ⁄ 字号 评论关闭

demo和下载地址:http://www.baletu.com/open/

自己写的,命名为panregion.js

Pan Region

panregion.js 是一款基于javascript实现的中国省市区上级联动效果。本插件是永久开源免费的。

内置3000多条全国最新的数据,是目前网络上数据最完整的一个小插件,数据摘取自2013年。体积只有175kb.

省市区多级联动,使用javascript的好处是,不需要服务器上面存放任何信息,也不需要频繁的刷新,也不需要和客户的有任何数据交互。大大的提高了效率和用户体验

功能:

1、省市区多级联动

2、全国地区检索,输入拼音或者汉字,就可以模糊查询匹配的地区数据。



下载地址:

直接引用地址:http://www.baletu.com/open/js/panregion.js



效果展示:

默认选中: 

 

 



使用文档:

1、引入javascript文件:<script type="text/javascript" src="panregion.js" charset="gbk"></script>

特别注意: 引入javascript文件的时候,必须加charset="gbk"这个属性,不然中文会乱码。

2、实例化对象 

var pan=new Pan();

3、传入对象id

 pan.read('Province','City','area'); 

方法:

1、设置默认选中值,必须要再read方法之后,否则无效

pan.setDefaultValues('湖南省','长沙市','开福区');

2、设置默认提示,必须要再read方法之前,否则无效

pan.setDefaultOption('select');

3、通过地区名 模糊查找数据,返回array数组

pan.findByName('天');

4、通过拼音查模糊找地区,返回array数组

pan.findBySpell('beijing');

5、拼音或者中文都自动转换查询,返回array数组

pan.findByString('北京');

6、$$(id) id选择器

$$()这个方法,传入id名,返回id的实例

注:没有加注释,没有介绍到的方法都是内部方法,请勿直接使用,否则会影响内部计算。

FAQ:

1、为什么引入之后无任何反应?

请检查你得配置路径是否正确

2、出现中文乱码?

请在<script>脚本上加入属性charset="gbk" 给引用的脚本指定编码格式 正确示例<script type="text/javascript" src="panregion.js" charset="gbk"></script>

3、模糊查找地区找不到?

本插件暂时只支持省、市区、县 这三级,或许你输入的不在这之中,如果发现有数据遗漏请及时联系我们

4、无法对多个对象进行操作?

当使用本插件之后,一个面页最多只支持一组省市区联动,下个版本将会支持多个对象

5、这个插件是否会一直持续更新?

以后将会一直保持这个插件的更新,继续完善数据,保证数据最全最新。

关于:

QQ群:273759216

QQ:599194993

邮箱:pan@baletu.com

抱歉!评论已关闭.