从QQ网站中提取的纯JS省市区三级联动菜单
更新时间：2013年12月25日 15:26:26 作者：
在浏览网页过程中发现QQ自己的JS省市区三级联动。所以研究了一下，就将其提取出来了。他的界面如下，喜欢的朋友可以学习下
我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动。所以研究了一下。他的界面如下：
何不直接使用的数据呢？
惊喜的是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>
何不直接使用的数据呢？
惊喜的是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>
相关文章
本例子在在 ff 2.0/ ie6 / ie7 中测试通过。但在 opera 8.5 cn中没有通过。希望大家测试。2008-12-12
javascript下利用for( in )语句 获得所有事件名称的代码
2008-02-02
这篇文章主要给大家介绍了微信小程序最近新增的拖动组件movable-view的简单使用教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
这篇文章主要介绍了使用js控制href内容的连接内容的变化,需要的朋友可以参考下2014-04-04
许多人对JavaScript的原型及原型链仍感到困惑，网上的文章又大多长篇大论，令读者不明觉厉。下面小编将用最简洁明了的图文介绍JavaScript的原型及原型链。2016-08-08
让你的for循环提升性能的写法，需要的朋友可以参考下。2010-02-02
Bootstrap CSS组件之下拉菜单(dropdown)
这篇文章主要为大家详细介绍了Bootstrap CSS组件之下拉菜单(dropdown),具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了js实现幻灯片轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了Bootstrap3学习笔记(二)之排版的相关资料,非常具有参考价值，特此分享脚本之家平台，供大家参考2016-05-05
本篇文章主要是对javascript操作referer进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
最新评论