[更新20100922]jQuery Location Select 插件－地址联动、地质检测

[更新20100922]jQuery Location Select 插件－地址联动、地理检测

最新版本的LocationSelect已经将其与jQuery分离，但做了一个jQuery的适配器，可以和jQuery一起使用。而且现在可以支持任意级别联动??

介绍

用户的地址选择往往是网络应用中不可缺少的一部分，可是遇到了以下问题：

地址数据难以收集
用户选择烦琐，需要手动查找冗长的下拉菜单
难以维护地理数据以及重用组件
LocationSelect插件具有以下特点，有效的解决了以上三个问题：
- 基于广泛使用的jQuery插件库，轻易实现组件重用。你也可以选择使用不使用任何脚本库的版本。
- 地理数据整理来自国家公布数据
- 自动判断用户地理位置并进行最大努力的自动选择
- 独立的json数据源，可以方便的进行维护
  演示
  一个在线演示可以在http://pagetalks.com/share/LocationSelect找到。
  该演示实现了一个自动探测用户地理位置并自行选择的标准案例。
  兼容性
  我测试过如下浏览器：Safari5、Safari Mobile（iOS 4.0.1）、Firefox3、IE6、IE7、IE8、Opera10
  ?
  下载
  代码寄存在GitHub ： http://github.com/RobinQu/LocationSelect-Plugin
  安装
  1. (可选)引入jQuery脚本库，目前脚本仅在1.4.2的jQuery中进行过调试，推荐大家使用。同时，还可以使用Google的CDN进行加速：
```
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
```
  2. 由于需要用到JSON的解析器，脚本默认会调用JSON.parse方法来解析。如果你的项目里没有定义JSON.parse方法，请引用JSON.org的脚本。
```
&lt;script src="http://www.JSON.org/json2.js" type="text/javascript"&gt;&lt;/script&gt;
```
  3. 现在已经不用手动引入第三方脚本了。引入地理查询引擎（可选）- 本脚本是使用Google Map API V2以及MAXMIND的Javascript API进行联合查询实现确定用户地理信息的。随着Google Map的反向地址解析更为强大后，脚本会考虑减少外部脚本的依赖性。目前如果您需要使用自动检测功能，您必须引入这两个脚本：
```
&lt;script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"&gt;&lt;/script&gt;&lt;script src="http://maps.google.com/maps?file=api&v=2&key=XXXXXXX_YOUR_API_KEY_XXXX&sensor=false" type="text/javascript"&gt;
```
  4. 引入LocationSelect的脚本文件
```
&lt;script type="text/javascript" src="LocationSelect.js"&gt;&lt;/script&gt;
```
  5. 在DOM Ready事件后调用，通常您应该传递响应数目的Select对象：
```
$(function() {$("select").LocationSelect({        name : "areas",labels :["请选择一个省份或直辖市", "请选择一个城市", "请选择一个区"]});
```
    还可以选择使用非jQuery的初始方法：
```
var ls = new com.elfvision.kit.LocationSelect({labels :["请选择一个省份或直辖市", "请选择一个城市", "请选择一个区"],elements : $("select").get()});
```
  参数
  name (String) 必须
  默认： “areas.json” json数据文件的地址，相对于当前页面
  labels (Array) 必须
  每个菜单的默认标签名，例如，["请选择一个省份或直辖市", "请选择一个城市", "请选择一个区"]。注意该元素的数量决定联动菜单中选项的数目，所以一定要为每个元素制定标签。
  detectGeoLocation : (Boolean)
  默认： true 是否自动检测用户地址并进行选择
  listHelper : (ListHelper)
  默认： com.elfvision.kit.LocationSelect.ListHelper 列表的工具类，该插件会使用次对象中的方法去加载对象、查询列表项目等操作。传入自定义的该对象可以进行该插件的深度定制。详细内容见后文。
  detector : (Function)
  默认： com.elfvision.kit.LocationSelect.GeoDetect 自动探测方法。默认情况下会利用用户IP查询地理位置。
  如何定制
  有很多同学想要进行定制操作，从1.1版本开始，就已经把大部分重要的算法给独立到单独的接口里面，方便大家定制。首先讲一下这个插件的工作原理。
  注意该项目中所有的属性均为字符串。
  level
  evel的意义是标识进行find请求的是第几个List。该插件中，前一个List的选项进行改变后会出发下一个List更新其内容，那么查找的find方法必须知道前一个List的level。find方法被插件调用时会自动传入level的值，该值从0开始计数。在插件默认的ListHelper里面，会调用一个find(-1)的请求，这是在请求第一个List的默认数据。插件默认状况就是通过这个请求去请求“省份”的数据项目的。
  id
  id值即前一个List中被选项目的id值。
  你可以用fetch方法从后台取得数据（不管是啥数据，只要复合数据项目的结构规定）之后，根据这些数据实现find方法。
  你可以传入的另外一个元素是detector函数。这个是执行自动选择的函数。默认的detector函数执行了地理位置的探测，但你可以实现你自得探测算法。只要最终使用LocationSelect.select()方法选择一组数据项。例如：
  that.select(["湖北省",“武汉市”]);
  这些值始终会根据List的传入顺序进行比对。如果List的数目大于给出的数组元素的数量，将不会对那些没有对应数值的List进行选择；如果传入的数值数组元素个数大于List个数，剩下的数组元素将会被抛弃。
  通过传入自定义的ListHelper和detector，你可以完全自定义出类似于多级商品门类选择之类的联动菜单应用。也就不局限于选择一下地址而已了??
  更新日志
  1.0.0
  LocationSelect的第一个发行版本
  1.1.0
  LocationSelect的重写版本，与jQuery独立，改善性能。
  ?
  1 楼 robinqu 2010-03-23 竟然没有回复?? 2 楼 bluemusic 2010-03-24 IE8测试下来没什么问题，等会下了看看代码 3 楼 ilovewei 2010-03-24 我居然是前三 4 楼 lobbychmd 2010-03-24 还以为有地图。。。 5 楼 kjj 2010-03-24 早一天,我昨天就不费劲做这个了!!!!!
  给你投了良好!!!
  
  顺便问一下,能不能裁剪,比如我需要选择到市就可以了,不需要地区!! 6 楼 coofucoo 2010-03-25 非常不错！
  非常期待楼主的下一个版本发布。。。 7 楼 ftmouse 2010-03-25 google走了，过两天api都访问不了了 8 楼 robinqu 2010-04-04 lobbychmd 写道还以为有地图。。。
  加地图是非常简单的～ 9 楼 robinqu 2010-04-04 kjj 写道早一天,我昨天就不费劲做这个了!!!!!
  给你投了良好!!!
  
  顺便问一下,能不能裁剪,比如我需要选择到市就可以了,不需要地区!!
  
  目前不能设置，但是可以手动将那个选择地区的input隐藏？
  
  再过几天会修改一次代码吧?? 10 楼 zhouzhao21 2010-04-20 楼主在 google code 上建个项目吧. 好实时跟进 11 楼 kimm 2010-04-22 这个功能不错，就是应用有点局限，内网就不好用了。 12 楼 robinqu 2010-09-22 更新了??把代码重写了一次??大家可以实现任何种类的联动，以及任意种类的数据源 13 楼 robinqu 2010-09-22 kimm 写道这个功能不错，就是应用有点局限，内网就不好用了。
  
  现在可以自定义查询的算法和数据源。
  
  下一个版本考虑使用HTML5的Geolocation API，对于较新的浏览器应该会准确很多?? 14 楼 robinqu 2010-09-27 又改了一些小错误～

[更新20100922]jQuery Location Selec

演示一个在线演示可以在http://pagetalks.com/share/LocationSelect找到。该演示实现了一个自动探测用户地理位置并自行选择的标准案例。

兼容性我测试过如下浏览器：Safari5、Safari Mobile（iOS 4.0.1）、Firefox3、IE6、IE7、IE8、Opera10?

下载代码寄存在GitHub ： http://github.com/RobinQu/LocationSelect-Plugin

热点推荐

演示
一个在线演示可以在http://pagetalks.com/share/LocationSelect找到。
该演示实现了一个自动探测用户地理位置并自行选择的标准案例。

兼容性
我测试过如下浏览器：Safari5、Safari Mobile（iOS 4.0.1）、Firefox3、IE6、IE7、IE8、Opera10
?

下载
代码寄存在GitHub ： http://github.com/RobinQu/LocationSelect-Plugin