从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 相关文章推荐
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 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超级全局变量数组小结
2012/10/04 PHP
php定时执行任务设置详解
2015/02/06 PHP
Java中final关键字详解
2015/08/10 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
Python获取邮件地址的方法
2015/07/10 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
解决Python中回文数和质数的问题
2019/11/24 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
Python tornado上传文件的功能
2020/03/26 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
2015元旦标语横幅
2014/12/09 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
会议主持词通用版
2019/04/02 职场文书