从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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
jQuery知识点整理
Jan 30 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
Javascript实现简易天数计算器
May 18 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实现的随机广告显示代码
2007/06/14 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
smarty中post用法实例
2014/11/28 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
python实现猜单词游戏
2020/05/22 Python
浅析Python的命名空间与作用域
2020/11/25 Python
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
彩色的非洲教学反思
2014/02/18 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
街道务虚会发言材料
2014/10/20 职场文书
学生会招新宣传语
2015/07/13 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
详解Python中下划线的5种含义
2021/07/15 Python