从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操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 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中截取中文字符串的代码小结
2011/07/17 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHP中Array相关函数简介
2016/07/03 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
解析vue中的$mount
2017/12/21 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
购买原创艺术品:Zatista
2019/11/09 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
教师演讲稿范文
2014/01/08 职场文书
道歉的话怎么说
2015/05/12 职场文书
python3实现无权最短路径的方法
2021/05/12 Python