从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 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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 XML备份Mysql数据库
2009/05/27 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
python生成验证码图片代码分享
2016/01/28 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python实现AES加密解密
2019/03/28 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
体育教育专业毕业生自荐信
2013/11/15 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
爱心倡议书范文
2014/05/12 职场文书
小学运动会口号
2014/06/07 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
python中tkinter复选框使用操作
2021/11/11 Python