从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 相关文章推荐
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
优化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设计模式 Strategy(策略模式)
2011/06/26 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
JS判定是否原生方法
2013/07/22 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
JavaScript制作简单分页插件
2016/09/11 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
Python中os模块功能与用法详解
2020/02/26 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript