从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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
JS读取XML文件示例代码
2013/11/15 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python闭包实现计数器的方法
2015/05/05 Python
python中round函数如何使用
2020/06/19 Python
python 实现性别识别
2020/11/21 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
师范生实习个人的自我评价
2013/09/28 职场文书
签约仪式主持词
2014/03/19 职场文书
师范大学生求职信
2014/06/13 职场文书
打架检讨书范文
2015/01/27 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers
python计算列表元素与乘积详情
2022/08/05 Python