从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 相关文章推荐
js计数器代码
Nov 04 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
原生JS实现京东查看商品点击放大
Dec 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中的日期加减方法示例
2014/08/21 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Django forms组件的使用教程
2018/10/08 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
详解django2中关于时间处理策略
2019/03/06 Python
Python中format()格式输出全解
2019/04/12 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python中 * 的用法详解
2019/07/10 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
银行员工职业规划范文
2014/01/21 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android