接了一个广州电信微信公众号开发的单子,用户在兑换礼品的时候需要填写个人信息,这个时候需要用到省市区三级联动的功能。

于是开始在网上找省市区三级联动的js,终于找到一篇:http://www.cnblogs.com/zjfree/archive/2013/08/20/3269864.html

这是使用QQ网站用的js来实现省市区三级联动的,既然腾讯都用了,姑且我也用这个js吧。

下面讲一下使用过程:

复制一份生成省市区联动数据的js:

http://ip.qq.com/js/geo.js

将js文件上传到服务器项目目录下面:

在需要用到省市区联动的html页面引入该js:

<script type="text/javascript" src="{:ADDON_PUBLIC_PATH}/js/geo.js"></script>

给省市区联动的select分别添加id:s1、s2、s3

<select name="province" id="s1" disabled="disabled">
<option></option>
</select>
<select name="city" id="s2">
<option></option>
</select>
<select name="area" id="s3">
<option></option>
</select>

给body标签绑定onload事件用于初始化省市区

<body onload="setup();preselect('陕西省');promptinfo();">

ok,这样就妥了。省市区三级联动完美实现。

本文为原创文章,转载请注明出处。
文章来源:艾逗笔个人博客
原文标题:省市区三级联动js实现
原文地址:2015/11/03/省市区三级联动js实现/