从QQ网站中提取的纯JS省市区三级联动菜单


Posted in Javascript onDecember 25, 2013

我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动。所以研究了一下。他的界面如下:
从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>
Javascript 相关文章推荐
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
js的对象与函数详解
Jan 21 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
优化javascript的执行效率一些方法总结
Dec 25 #Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 #Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 #Javascript
js 动态加载事件的几种方法总结
Dec 25 #Javascript
js 鼠标移动显示图片的简单实例
Dec 25 #Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 #Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 #Javascript
You might like
php中$this-&amp;gt;含义分析
2009/11/29 PHP
php中设置多级目录session的问题
2011/08/08 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
探讨php中header的用法详解
2013/06/07 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
超清晰的document对象详解
2007/02/27 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
JavaScript this绑定过程深入详解
2018/12/07 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
Python写的英文字符大小写转换代码示例
2015/03/06 Python
scrapy爬虫完整实例
2018/01/25 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
公司同意接收函
2014/01/13 职场文书
英语分层教学实施方案
2014/06/15 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
数学备课组工作总结
2015/08/12 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL
Java获取字符串编码格式实现思路
2022/09/23 Java/Android