调用QQ官方JS插件实现省市区三级联动

最新推荐文章于 2023-12-24 13:04:16 发布

刘鹏博.

最新推荐文章于 2023-12-24 13:04:16 发布

阅读量477

点赞数

分类专栏： Web前端 JS 文章标签： js html web javascript

Web前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

今天收到园友信息，想问我要原来写的一个《纯JS省市区三级联动》文章中最新的省市区数据。那个是老早以前搞的。记得数据是从数据库中提取生成的。一时也找不到当时的数据库了。

我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动。所以研究了一下。他的界面如下：

何不直接使用的数据呢？

惊喜的是QQ是使用引用外部JS来实现三级联动的。JS链接：http://ip.qq.com/js/geo.js

使用方法代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>QQ-JS三级联动</title>

</head>
	<body οnlοad="setup();promptinfo();">
        <form>
            <select class="select" name="province" id="s1">
              	<option></option>
            </select>
            <select class="select" name="city" id="s2">
              	<option ></option>
            </select>
            <select class="select" name="town" id="s3">
              	<option></option>
            </select>
            <input id="address" name="address" type="hidden" value="" />
          	<input οnclick="alert(document.getElementById('address').value); return false;" type="submit" value="提交" />
        </form>
        
        <!-- 直接调用QQ官方的省市区数据
		<script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script>
		-->
		<script type="text/javascript" src="js/geo.js" charset="gb2312"></script>
		<script>

		// 这个函数是必须的，因为在geo.js里每次更改地址时会调用此函数
		function promptinfo()
		{
		    var address = document.getElementById('address');
		    var s1 = document.getElementById('s1');
		    var s2 = document.getElementById('s2');
		    var s3 = document.getElementById('s3');
		    address.value = s1.value + s2.value + s3.value;
		}
		
		</script>
	</body>
</html>

实例下载：http://files.cnblogs.com/zjfree/qqJsAddress.rar

其中使用在线JS文件，可能官方geo.js文件编码格式为gb2312，所以使用时页面中默认是UTF-8会产生乱码；建议最好下载实例.rar，项目中使用导入geo.js文件，引入时加上charset="gb2312"解决编码问题。

以上基于原文有所改动。

原文链接：http://www.cnblogs.com/zjfree/