利用QQ IP库JS实现省市区三级联动

QQ省市区三级联动功能介绍

笔者在访问 http://ip.qq.com/ 时注意到，QQ官方提供了一套基于JavaScript的省市区三级联动功能。经过研究，其界面效果如下所示：

既然数据已经公开，为何不直接复用呢？

令人惊喜的是，QQ采用了引用外部JS文件的方式来实现这一联动效果。具体的JS文件地址为：http://ip.qq.com/js/geo.js

代码实现与使用方法

具体的使用方法如下所述：

 
<!DOCTYPE html>
<html>
<head>
<title>QQ JS省市区三级联动</title>
<!-- 直接使用QQ的省市区数据 -->
<!-- 
<script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script>
--> 
<script type="text/javascript" src="geo.js"></script>
</head>
<body onload="setup();preselect('陕西省');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 onclick="alert(document.getElementById('address').value); return false;" type="submit" value="提交" />
</form>
<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>